@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4; }

:root {
  --alb: #ffffff;
  --gri: #e9e9e7;
  --gri-inchis: #d9d9d6;
  --negru: #1b1b1b;
  --text: #1b1b1b;
  --text-2: #545454;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;
  --t-mare: 32px; --t-titlu: 32px; --t-corp: 16px; --t-mic: 14px;
  --antet: 64px;
  --margine: var(--s3);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 960px) {
  :root { --t-mare: 56px; --t-titlu: 40px; --t-corp: 17px; --antet: 80px; --margine: max(var(--s6), calc((100vw - 1184px) / 2)); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--alb); color: var(--text); font: 400 var(--t-corp)/1.6 "Montserrat", system-ui, sans-serif; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
[id] { scroll-margin-top: calc(var(--antet) + var(--s3)); }
:focus-visible { outline: 2px solid var(--negru); outline-offset: 4px; }
::selection { background: var(--negru); color: var(--alb); }

/* Antet: sigla stânga, meniul, butonul negru cu telefonul (ca pe drblaga.ro) */
.antet { position: sticky; top: 0; z-index: 10; background: var(--alb); border-bottom: 1px solid var(--gri-inchis); }
.antet-in { height: var(--antet); padding: 0 var(--margine); display: flex; align-items: center; gap: var(--s4); }
.sigla { display: flex; align-items: flex-end; gap: var(--s2); text-decoration: none; color: var(--negru); }
.sigla-img { display: block; height: 48px; width: auto; }
@media (min-width: 960px) { .sigla-img { height: 60px; } }
.meniu { display: none; margin-left: auto; gap: var(--s5); font-size: var(--t-mic); font-weight: 500; }
.meniu a { text-decoration: none; padding: var(--s2) 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .2s var(--ease); }
@media (hover: hover) { .meniu a:hover { background-size: 100% 1px; } }
.antet-tel { margin-left: auto; }
.antet-tel span { font-size: var(--t-mic); }
@media (min-width: 960px) { .meniu { display: flex; } .antet-tel { margin-left: var(--s4); } }
@media (max-width: 420px) { .antet-tel span { display: none; } .antet-tel { width: 48px; padding: 0; justify-content: center; } }

@supports (animation-timeline: scroll()) {
  .antet { animation: antet-derulat linear both; animation-timeline: scroll(); animation-range: 0 120px; }
  @keyframes antet-derulat { to { box-shadow: 0 6px 16px rgba(0,0,0,.08); } }
}

/* Butonul negru, același pe tot site-ul */
.buton-negru { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s4);
  background: var(--negru); color: var(--alb); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; border-radius: 2px;
  transition: transform .15s var(--ease), background .15s, box-shadow .15s; }
.buton-negru svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex-shrink: 0; }
@media (hover: hover) { .buton-negru:hover { background: #000; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.18); } }
.buton-negru:active { transform: translateY(1px) scale(.98); box-shadow: none; transition-duration: .06s; }

/* Erou: poza pe toată lățimea, textul în stânga peste ea */
.erou { position: relative; display: flex; flex-direction: column; color: var(--alb); overflow: hidden; background: var(--negru); }
.erou-poza { order: 2; width: 100%; height: 280px; object-fit: cover; object-position: 55% 20%; }
.erou-text { position: relative; z-index: 1; width: 100%; padding: var(--s5) var(--margine); display: grid; gap: var(--s3); }
.erou h1 { font-size: var(--t-mare); max-width: 15ch; text-wrap: balance; }
.erou p { max-width: 34rem; }
.erou .erou-mic { font-size: var(--t-mic); color: #e6e6e6; }
.buton-mare { width: 100%; min-height: 64px; font-weight: 700; background: var(--alb); color: var(--negru); margin-top: var(--s2); }
.buton-mare svg { width: 24px; height: 24px; }
.buton-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.buton-text small { font-size: var(--t-mic); font-weight: 500; letter-spacing: 0.04em; }
@media (hover: hover) { .buton-mare:hover { background: var(--gri); } }
@media (min-width: 960px) {
  .erou { min-height: calc(100svh - var(--antet)); max-height: 880px; justify-content: center; }
  .erou-poza { position: absolute; inset: 0; height: 100%; order: 0; }
  .erou::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,0) 70%); }
  .erou-poza { object-position: 70% 8%; }
  .erou-text { padding: var(--s8) var(--margine); }
  .buton-mare { width: auto; padding: 0 var(--s6); justify-self: start; }
}

/* Despre noi: bandă gri, text stânga, poză dreapta */
.despre { background: var(--gri); display: grid; }
.despre-text { padding: var(--s7) var(--margine); display: grid; gap: var(--s3); align-content: center; max-width: 36rem; }
.despre h2 { font-size: var(--t-titlu); margin-bottom: var(--s2); }
.despre-poza { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; }
@media (min-width: 960px) {
  .despre { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--s7) var(--margine); gap: var(--s8); max-width: none; }
  .despre-text { padding: 0; }
  .despre-poza { aspect-ratio: 4 / 3; max-height: 520px; }
}

/* Cunoaște echipa: titlu centrat, numele */
.echipa { padding: var(--s7) var(--s3); text-align: center; display: grid; gap: var(--s4); justify-items: center; }
.echipa h2 { font-size: var(--t-titlu); margin-bottom: var(--s4); }
.echipa-medici { font-size: var(--t-titlu); font-weight: 400; line-height: 1.3; color: var(--text-2); }
.echipa-rest { color: var(--text-2); }
.echipa-poza { width: 100%; height: auto; max-width: 960px; aspect-ratio: 1600 / 989; object-fit: cover; margin-bottom: var(--s4); }
@media (min-width: 960px) { .echipa { padding: var(--s8) var(--s6); } }

/* Tratamente: plăci pe toată lățimea, numele mare peste poză, se deschid pe loc */
.tratamente { display: grid; gap: var(--s2); padding: var(--s7) 0; border-top: 1px solid var(--gri-inchis); }
.tratamente > h2 { font-size: var(--t-titlu); text-align: center; padding: 0 var(--s3) var(--s3); }
.placa summary { position: relative; display: grid; place-items: center; align-content: center; gap: var(--s3); height: 180px; overflow: hidden; cursor: pointer; list-style: none; color: var(--alb); background: var(--negru); }
.placa summary::-webkit-details-marker { display: none; }
.placa summary img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.placa summary::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); transition: background .3s; }
.placa-rezumat { position: relative; z-index: 1; max-width: 32rem; padding: 0 var(--s3); text-align: center; color: #f2f2f2; }
.erou-recenzii { justify-self: start; color: var(--alb); font-size: var(--t-mic); text-decoration: underline; text-underline-offset: 4px; }
.erou-recenzii .stele { color: #f5c542; text-decoration: none; display: inline-block; margin-right: 4px; letter-spacing: 1px; }
.placa h3 { position: relative; z-index: 1; font-size: var(--t-mare); text-align: center; padding: 0 var(--s3); }
.placa-buton { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); background: var(--alb); color: var(--negru); font-size: var(--t-mic); font-weight: 600; letter-spacing: 0.04em; transition: background .15s, transform .15s var(--ease); }
.placa[open] .placa-buton { font-size: 0; }
.placa[open] .placa-buton::before { content: "Închide"; font-size: var(--t-mic); }
@media (hover: hover) {
  .placa summary:hover::after { background: rgba(0,0,0,.45); }
  .placa summary:hover img { transform: scale(1.03); }
  .placa summary:hover .placa-buton { background: var(--gri); transform: translateY(-2px); }
}
.placa summary:active .placa-buton { transform: translateY(1px) scale(.98); }
.placa summary:focus-visible { outline-offset: -4px; outline-color: var(--alb); }
.placa-text { background: var(--gri); padding: var(--s5) var(--s3); display: grid; gap: var(--s3); justify-items: center; }
.placa-text p { max-width: 40rem; width: 100%; }
.placa[open] .placa-text { animation: deschide .3s var(--ease); }
@keyframes deschide { from { transform: translateY(-8px); } }
@media (min-width: 960px) {
  .placa summary { height: 280px; gap: var(--s4); }
  .placa-text { padding: var(--s6); }
}

/* Contact: text stânga, hartă dreapta */
.contact { display: grid; background: var(--gri); }
.contact-text { padding: var(--s7) var(--margine); display: grid; gap: var(--s2); align-content: center; }
.contact h2 { font-size: var(--t-titlu); margin-bottom: var(--s3); }
.contact h3 { font-size: var(--t-mic); font-weight: 600; color: var(--text-2); margin-top: var(--s3); }
.harta { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(.4); }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness .15s; }
@media (hover: hover) { .link:hover { text-decoration-thickness: 2px; } }
@media (min-width: 960px) {
  .contact { grid-template-columns: 2fr 3fr; }
  .contact-text { padding: var(--s8) var(--s6) var(--s8) var(--margine); }
  .harta { height: 100%; min-height: 520px; }
}

/* Cardul de bun venit, ca la ei */
.bun-venit { padding: var(--s7) var(--s3); }
.card { max-width: 48rem; margin: 0 auto; padding: var(--s6) var(--s4); background: var(--alb); box-shadow: 0 2px 24px rgba(0,0,0,.1); text-align: center; display: grid; gap: var(--s3); justify-items: center; }
.card h2 { font-size: var(--t-titlu); }
.card p { max-width: 34rem; color: var(--text-2); }
.card .buton-negru { margin-top: var(--s2); }
@media (min-width: 960px) { .bun-venit { padding: var(--s8) var(--s6); } .card { padding: var(--s7); } }

/* Subsol gri: sigla, telefon, adresă */
.subsol { background: var(--gri); border-top: 1px solid var(--gri-inchis); }
.subsol-in { padding: var(--s6) var(--margine); display: grid; gap: var(--s5); align-items: start; }
.subsol h3 { font-size: var(--t-mic); font-weight: 600; color: var(--text-2); margin-bottom: var(--s1); }
.subsol a:not(.sigla) { text-decoration: none; }
@media (hover: hover) { .subsol a:not(.sigla):hover { text-decoration: underline; } }
.subsol-jos { padding: 0 var(--margine) var(--s5); font-size: var(--t-mic); color: var(--text-2); }
@media (min-width: 960px) { .subsol-in { grid-template-columns: 2fr 1fr 1fr; } }

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