/* ==========================================================================
   CLINICA CARMED — Sistem de design "Fișa clinică"
   Concept: precizia unei fișe medicale + ritmul unui traseu ECG.
   Fără framework, fără dependențe. Editabil linie cu linie.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Culori. Bază rece, clinică. Roșul apare DOAR pe traseul ECG și pe
     acțiunea urgentă de pe mobil — niciodată ca fundal de secțiune. */
  --paper:      #FBFCFD;
  --paper-rgb:  251, 252, 253;
  --mist:       #EAF0F3;
  --line:       #D5E0E6;
  --ink:        #0F1D26;
  --ink-soft:   #4A5C68;
  --deep:       #0C3B4D;   /* petrol profund — culoarea de brand */
  --deep-hi:    #14586F;
  --sea:        #12707F;   /* linkuri, iconuri */
  --pulse:      #D8443C;   /* traseul ECG, inima, apel urgent */
  --leaf:       #1F6F5C;   /* decontat CAS / gratuit */
  --gold:       #B08237;   /* distincții, „cel mai ales" */
  --sky:        #0A7E9E;   /* accentul care înviorează: tarife, iconuri, cuvântul
                              evidențiat din titluri. Rămâne în familia petrol,
                              dar e vizibil mai luminos decât --sea. 4,6:1 pe
                              hârtie, deci trece AA și la corp de literă mic. */
  --sky-lit:    #6FD3EA;   /* același accent, dar pe fundal petrol închis */
  --line-hi:    #B9CCD6;   /* chenar la hover */
  --wa:         #25D366;   /* verdele WhatsApp — impus de brandul lor */

  /* Aceleași culori în componente RGB, pentru umbre și inele translucide.
     Nu adăuga hex direct în reguli — extinde lista de aici. */
  --sea-rgb:    18, 112, 127;
  --sky-rgb:    10, 126, 158;
  --deep-rgb:   12, 59, 77;
  --pulse-rgb:  216, 68, 60;
  --wa-rgb:     37, 211, 102;

  /* Tipografie */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scara e construită de jos în sus: întâi cât de mare trebuie să fie textul
     ca să se citească fără efort, abia apoi cât de mari sunt titlurile peste el.
     Titlul principal e de 2,7 ori corpul de literă, nu de 3,4 ca înainte —
     pagina se citește mai ușor și ierarhia se ține minte mai bine. */
  --t-xs:  0.875rem;                            /* 14px — etichete, badge-uri */
  --t-sm:  1rem;                                /* 16px — text secundar */
  --t-base: 1.125rem;                           /* 18px — corpul de text */
  --t-lg:  clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);   /* 19 → 23 */
  --t-h4:  clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);    /* 19 → 23 */
  --t-h3:  clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);       /* 22 → 28 */
  --t-h2:  clamp(1.75rem, 1.45rem + 1.3vw, 2.3rem);        /* 28 → 37 */
  --t-h1:  clamp(2rem, 1.6rem + 2.1vw, 3rem);              /* 32 → 48 */

  /* Spațiu — scară de 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --wrap: 1180px;
  --prose: 68ch;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15,29,38,.06), 0 4px 16px rgba(15,29,38,.05);
  --shadow-2: 0 8px 34px rgba(12,59,77,.13);
  --bar-h: 74px;
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--sky); text-underline-offset: 3px; }
a:hover { color: var(--deep); }
button { font: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--deep);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.01em; }
/* Un cuvânt-două din titlu, cursiv și în accent. Nu mai mult de o dată
   pe titlu, altfel nu mai evidențiază nimic. */
h1 em, h2 em { font-style: italic; color: var(--sky); font-weight: 600; }

p  { margin: 0 0 var(--s4); max-width: var(--prose); }
ul { margin: 0 0 var(--s4); padding-left: 1.15em; }
li { margin-bottom: var(--s2); }

:focus-visible {
  outline: 3px solid var(--pulse);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--deep); color: #fff; padding: var(--s3) var(--s5);
}
.skip:focus { left: 8px; top: 8px; }

/* --- 3. Layout ---------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(var(--s7), 6vw, var(--s9)); }
.section--tint { background: linear-gradient(180deg, #fff 0%, var(--mist) 100%); }
.section--deep { background: var(--deep); color: #E4EEF2; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep p { color: #C3D6DE; }
.section--deep .eyebrow, .section--deep a { color: var(--sky-lit); }
.section--deep h1 em, .section--deep h2 em { color: var(--sky-lit); }

.lede { font-size: var(--t-lg); color: var(--ink-soft); max-width: 60ch; }
.eyebrow {
  font-size: var(--t-sm); font-weight: 600; color: var(--sky);
  margin: 0 0 var(--s2);
}
.grid { display: grid; gap: var(--s5); }
@media (min-width: 720px)  { .g-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .g-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .g-4 { grid-template-columns: repeat(4, 1fr); } }

/* Un element de grilă sau de flex refuză din start să scadă sub lățimea
   conținutului său. Un <select> se măsoară după cea mai lungă opțiune, deci
   „Consultație cardiologie (CAS, cu bilet de trimitere)" lățea formularul și
   împingea pagina de contact în afara ecranului pe telefon. Lanțul de mai jos
   dă voie fiecărui nivel să se strângă. */
.grid, .contact, .doctor, .form, .field, .info, .steps, .symptoms,
.grid > *, .contact > *, .doctor > *, .form > *, .field > *,
.info > li, .info li > span, .steps > li, .symptoms > li { min-width: 0; }
.field select, .field input, .field textarea { width: 100%; }

/* Adresa de e-mail nu are unde să se rupă: îi dăm voie oriunde. */
.info a[href^="mailto:"] { overflow-wrap: anywhere; }

/* --- 4. Traseul ECG (motivul vizual al brandului) ----------------------- */
.ecg { display: block; width: 100%; height: 44px; color: var(--pulse); opacity: .9; }
.ecg path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ecg--draw path {
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: trace 2.6s cubic-bezier(.5,.05,.35,1) .25s forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }
.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }

/* --- 5. Butoane --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s6);
  font-weight: 600; font-size: var(--t-base);
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .22s ease, transform .12s ease;
}
.btn--primary { background: var(--deep); color: #fff; }
.btn--primary:hover { background: var(--deep-hi); color: #fff; }
.btn--ghost { background: #fff; color: var(--deep); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--deep); color: var(--deep); }
.btn--call { background: var(--pulse); color: #fff; }
.btn--call:hover { background: #B93831; color: #fff; }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --- 6. Antet ----------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(var(--paper-rgb), .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: var(--s5); min-height: var(--bar-h); }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; color: var(--pulse); flex: none; }
.brand__name {
  font-family: var(--font-ui); font-size: 1.35rem; font-weight: 700;
  color: var(--deep); line-height: 1; letter-spacing: -.01em;
}
.brand__sub { display: block; font-family: var(--font-ui); font-size: var(--t-xs); color: var(--ink-soft); font-weight: 400; letter-spacing: 0; }

.nav { display: none; }
.nav a {
  position: relative;
  color: var(--ink); text-decoration: none; font-weight: 500;
  padding: var(--s2) 0; border-bottom: 2px solid transparent;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--pulse); transform: scaleX(0); transform-origin: left;
  transition: transform .24s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--deep); }
.nav a[aria-current="page"]::after { background: var(--deep); transform: scaleX(1); }
.hdr__cta { display: none; }

.burger {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s4);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  color: var(--deep); font-weight: 600; cursor: pointer;
}
.burger__bars { position: relative; width: 18px; height: 12px; }
.burger__bars span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 5px; }
.burger__bars span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Sertar mobil — ocupă tot ecranul, ținte mari, fără scroll în spate */
.drawer {
  position: fixed; inset: var(--bar-h) 0 0; z-index: 55;
  background: var(--paper); padding: var(--s5) 0 120px;
  overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.drawer[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
.drawer a.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s5) 0; font-size: 1.2rem; font-weight: 600;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.drawer__foot { margin-top: var(--s6); display: grid; gap: var(--s3); }
body[data-lock="true"] { overflow: hidden; }
@media (min-width: 940px) {
  .nav { display: flex; gap: var(--s6); align-items: center; }
  .hdr__cta { display: inline-flex; }
  .burger, .drawer { display: none; }
}

/* --- 7. Hero ------------------------------------------------------------ */
.hero { padding-top: var(--s7); padding-bottom: var(--s6); background: linear-gradient(180deg, #fff 0%, var(--paper) 60%); }
.hero__grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s8); } }
.hero h1 { margin-bottom: var(--s4); }
.hero__lede { font-size: var(--t-lg); color: var(--ink-soft); max-width: 46ch; }
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-2); aspect-ratio: 4/3; object-fit: cover; }

/* „chips" de încredere — informație, nu decor */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: 0; margin: var(--s5) 0 0; list-style: none; }
.chips li { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: 600; color: var(--deep); margin: 0; }
.chips svg { width: 18px; height: 18px; color: var(--leaf); flex: none; }

/* Fotografie explicativă în corpul paginii, cu legendă dedesubt. */
.shot { margin: 0; }
.shot img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-2); aspect-ratio: 4/3; object-fit: cover; }
.shot figcaption { font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--s3); }

/* --- 8. Carduri de serviciu -------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s5); box-shadow: var(--shadow-1);
}
.card h3, .card h4 { margin-bottom: var(--s2); }
.card p { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s3); }
.card p:last-child { margin-bottom: 0; }
.card__ico { width: 30px; height: 30px; color: var(--sky); margin-bottom: var(--s3); }
.card__meta { font-size: var(--t-xs); color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s4); }

/* --- 9. Tabel de prețuri ----------------------------------------------- */
.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
.tab {
  min-height: 48px; padding: 0 var(--s5); background: #fff; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-weight: 600;
}
.tab[aria-selected="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }

.pricetable { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pricetable caption { text-align: left; font-weight: 600; color: var(--deep); padding: var(--s4) var(--s5) 0; }
.pricetable th, .pricetable td { padding: var(--s4) var(--s5); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.pricetable thead th { background: var(--mist); font-size: var(--t-sm); color: var(--ink-soft); font-weight: 600; }
.pricetable tbody tr:last-child td { border-bottom: 0; }
.pricetable td:last-child, .pricetable th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sky); }
.pricetable .note { display: block; font-size: var(--t-sm); font-weight: 400; color: var(--ink-soft); }
/* Pe telefon lățimea minimă a tabelului o dau cel mai lung cuvânt din coloana
   de servicii, „Electrocardiogramă", plus tariful care nu se rupe niciodată.
   Strângem spațiul lateral din celule; litera rămâne la fel de mare. */
@media (max-width: 620px) {
  .pricetable th, .pricetable td { padding-inline: var(--s3); }
}

/* Reglaje pentru ecrane înguste, după mărirea corpului de literă ------------ */
@media (max-width: 430px) {
  /* Subtitlul siglei ar cădea pe trei rânduri și ar umfla bara de sus.
     Numele clinicii și meniul ajung; informația e oricum în titlul paginii. */
  .brand__sub { display: none; }
  /* „Programează o consultație" încape pe un rând dacă strângem marginile
     butonului. Înălțimea de atins rămâne neatinsă. */
  .btn { padding-inline: var(--s4); }
}

.badge {
  display: inline-block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px; background: #E6F2EE; color: var(--leaf); border: 1px solid #BFDDD4;
}
.badge--gold { background: #FBF3E2; color: var(--gold); border-color: #E9D6AE; }

/* Pachete — ordinea și evidențierea comunică valoarea, nu culoarea */
.pack { position: relative; display: flex; flex-direction: column; }
.pack__price { font-family: var(--font-ui); font-weight: 700; font-size: 2.15rem; color: var(--sky); font-variant-numeric: tabular-nums; line-height: 1; margin: var(--s2) 0 var(--s4); }
.pack__price span { font-family: var(--font-ui); font-size: var(--t-sm); color: var(--ink-soft); }
.pack ul { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.pack li { position: relative; padding-left: 26px; font-size: var(--t-sm); color: var(--ink-soft); }
.pack li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px;
  border-left: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf); transform: rotate(-45deg);
}
.pack .btn { margin-top: auto; }
.pack--featured { border-color: var(--deep); box-shadow: var(--shadow-2); }
.pack__flag {
  position: absolute; top: -12px; left: var(--s5);
  background: var(--deep); color: #fff; font-size: var(--t-xs); font-weight: 700;
  padding: 3px 12px; border-radius: 999px;
}

/* --- 10. Pași / proces -------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s5); list-style: none; padding: 0; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; padding-top: var(--s5); border-top: 3px solid var(--deep); }
.steps li::before {
  content: counter(step); display: block; font-family: var(--font-display);
  font-size: 1.75rem; color: var(--sky); line-height: 1; margin-bottom: var(--s2);
}
.steps h3 { font-size: var(--t-h4); font-family: var(--font-ui); font-weight: 600; }
.steps p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; }

/* --- 11. Medic ---------------------------------------------------------- */
.doctor { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 860px) { .doctor { grid-template-columns: 320px 1fr; gap: var(--s8); } }
.doctor__photo { border-radius: var(--r-lg); box-shadow: var(--shadow-2); width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.cv { list-style: none; padding: 0; margin: 0 0 var(--s5); border-left: 2px solid var(--line); }
.cv li { padding: 0 0 var(--s4) var(--s5); position: relative; font-size: var(--t-sm); }
.cv li::before { content: ""; position: absolute; left: -6px; top: .55em; width: 10px; height: 10px; background: var(--sky); border-radius: 50%; border: 2px solid var(--paper); }
.cv b { color: var(--deep); }

/* --- 12. Simptome / „când să vii" -------------------------------------- */
.symptoms { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
@media (min-width: 720px) { .symptoms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .symptoms { grid-template-columns: repeat(3, 1fr); } }
.symptoms li {
  display: flex; gap: var(--s3); align-items: flex-start; margin: 0;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--pulse);
  border-radius: var(--r-sm); padding: var(--s4);
  font-size: var(--t-sm);
}
.alert {
  border: 1px solid #F0C9C4; background: #FDF3F2; border-radius: var(--r-md);
  padding: var(--s5); margin-top: var(--s5);
}
.alert p { margin: 0; font-size: var(--t-sm); color: #7E2C25; max-width: none; }
.alert strong { color: var(--pulse); }

/* --- 13. Acordeon FAQ --------------------------------------------------- */
.faq { border-top: 1px solid var(--line); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s5) 40px var(--s5) 0;
  font-weight: 600; color: var(--deep); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { font-size: var(--t-sm); color: var(--ink-soft); padding-bottom: var(--s5); margin: 0; }

/* --- 14. Contact -------------------------------------------------------- */
.contact { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.1fr; gap: var(--s8); } }
.info { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5); }
.info li { display: flex; gap: var(--s4); margin: 0; }
.info svg { width: 22px; height: 22px; color: var(--sky); flex: none; margin-top: 3px; }
.info b { display: block; color: var(--deep); }
.info a { font-weight: 600; text-decoration: none; }
.map { width: 100%; height: 340px; border: 1px solid var(--line); border-radius: var(--r-md); }

.form { display: grid; gap: var(--s4); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s6); box-shadow: var(--shadow-1); }
.field { display: grid; gap: var(--s2); }
.field label { font-weight: 600; font-size: var(--t-sm); color: var(--deep); }
.field input, .field select, .field textarea {
  font: inherit; padding: var(--s3) var(--s4); min-height: 50px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sky); }
.field small { font-size: var(--t-xs); color: var(--ink-soft); }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-soft); }
.check input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 2px; }
.form__status { font-size: var(--t-sm); font-weight: 600; }
.form__status[data-kind="err"] { color: var(--pulse); }
.form__status[data-kind="ok"] { color: var(--leaf); }

/* --- 15. Subsol + bara mobilă ------------------------------------------ */
.foot { background: var(--deep); color: #B9CFD8; padding-block: var(--s8) var(--s7); font-size: var(--t-sm); }
.foot a { color: #DCEAF0; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot h4 { color: #fff; font-size: var(--t-sm); margin-bottom: var(--s3); }
.foot__grid { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot__bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--s7); padding-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border-top: 1px solid var(--line);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  gap: var(--s2); box-shadow: 0 -6px 20px rgba(15,29,38,.08);
}
.actionbar .btn { min-height: 50px; padding: 0 var(--s3); font-size: var(--t-sm); }
@media (min-width: 940px) { .actionbar { display: none; } }
@media (max-width: 939px) { body { padding-bottom: 74px; } }

.wa { position: fixed; right: 16px; bottom: 92px; z-index: 65; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); display: grid; place-items: center; box-shadow: var(--shadow-2); }
.wa svg { width: 30px; height: 30px; color: #fff; }
@media (min-width: 940px) { .wa { bottom: 24px; } }

/* --- 16. Utilitare ------------------------------------------------------ */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }
.muted { font-size: var(--t-sm); color: var(--ink-soft); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mb-6 { margin-bottom: var(--s6); }

/* --- 17. Mișcare --------------------------------------------------------
   Regula casei: mișcarea explică ierarhia, nu decorează. Deplasare sub 20 px,
   durată sub 800 ms, fără sărituri și fără efecte care mută textul citit.

   Apariția la derulare (.reveal) e pornită din `main.js` și se aplică DOAR
   elementelor aflate sub linia de plutire la încărcare. Fără JavaScript,
   fără IntersectionObserver sau cu „reduce motion" pornit, pagina rămâne
   întreagă și instantanee — nimic nu e ascuns de CSS singur.
   ---------------------------------------------------------------------- */

/* Curba folosită peste tot: pornire fermă, oprire lină. */
:root { --ease: cubic-bezier(.22,.61,.36,1); }

@keyframes rise      { from { opacity: 0; transform: translateY(20px); } }
@keyframes riseSmall { from { opacity: 0; transform: translateY(10px); } }
@keyframes riseMedia { from { opacity: 0; transform: translateY(20px) scale(1.035); } }
@keyframes popIn     { from { opacity: 0; transform: translateY(8px) scale(.72); } }
@keyframes popDot    { from { transform: scale(0); } }

/* 17.1 Apariție la derulare — clasele vin din JS ------------------------ */
/* Animație, nu tranziție: altfel apariția s-ar bate cu tranziția de hover a
   cardurilor. Cadrul `rise` are doar un `from`, deci la final proprietățile
   revin la valorile normale ale elementului și ridicarea la mouse merge. */
.reveal { opacity: 0; }
.reveal.is-in { opacity: 1; animation: rise .55s var(--ease) var(--rd, 0s) both; }
.reveal.is-media.is-in { animation: riseMedia .75s var(--ease) var(--rd, 0s) both; }

/* Traseul ECG din paginile interioare se desenează când intră în ecran. */
.ecg.reveal { opacity: 1; }
.ecg.reveal.is-in { animation: none; }
.ecg.reveal path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.ecg.reveal.is-in path { animation: trace 2.2s cubic-bezier(.5,.05,.35,1) forwards; }

/* Detalii care pornesc odată cu blocul părinte, fără JS suplimentar. */
.is-in > .info > li,
.is-in > .cv > li { animation: riseSmall .45s var(--ease) backwards; }
.is-in > .info > li:nth-child(1),
.is-in > .cv > li:nth-child(1) { animation-delay: .10s; }
.is-in > .info > li:nth-child(2),
.is-in > .cv > li:nth-child(2) { animation-delay: .18s; }
.is-in > .info > li:nth-child(3),
.is-in > .cv > li:nth-child(3) { animation-delay: .26s; }
.is-in > .info > li:nth-child(4),
.is-in > .cv > li:nth-child(4) { animation-delay: .34s; }
.is-in > .cv > li:nth-child(n+5) { animation-delay: .42s; }
.is-in .cv li::before { animation: popDot .4s var(--ease) .30s backwards; }

/* Numărul pasului sare în față după ce blocul s-a așezat. */
.steps li.reveal.is-in::before { animation: popIn .5s var(--ease) .14s backwards; }

/* 17.2 Intrarea în scenă a heroului — pur CSS, independent de JS -------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1       { animation: rise .65s var(--ease) .05s backwards; }
  .hero__lede    { animation: rise .65s var(--ease) .14s backwards; }
  .hero .btn-row { animation: rise .65s var(--ease) .23s backwards; }
  .hero__media   { animation: riseMedia .8s var(--ease) .12s backwards; }
  .hero .chips li { animation: riseSmall .5s var(--ease) backwards; }
  .hero .chips li:nth-child(1) { animation-delay: .34s; }
  .hero .chips li:nth-child(2) { animation-delay: .42s; }
  .hero .chips li:nth-child(3) { animation-delay: .50s; }
}

/* 17.3 Antet: umbră la derulare + firul de progres al citirii ----------- */
.hdr { transition: box-shadow .25s ease, background-color .25s ease; }
.hdr[data-scrolled="true"] {
  background: rgba(var(--paper-rgb), .97);
  box-shadow: 0 4px 18px rgba(var(--deep-rgb), .10);
}
/* Firul e creat din JS, deci nu rămâne un element gol dacă scriptul lipsește. */
.hdr__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--deep-hi));
  transform: scaleX(var(--p, 0)); transform-origin: left;
  transition: transform .1s linear;
}

/* 17.4 Inima din siglă bate încet — singurul element în mișcare continuă */
@keyframes heartbeat {
  0%, 86%, 100% { transform: scale(1); }
  88% { transform: scale(1.10); }
  90% { transform: scale(1); }
  93% { transform: scale(1.06); }
  95% { transform: scale(1); }
}
.hdr .brand__mark { transform-origin: 50% 58%; animation: heartbeat 5s ease-in-out infinite; }

/* 17.5 Carduri, butoane, rânduri — reacție la mouse, doar unde există --- */
.card { transition: transform .24s var(--ease), box-shadow .24s ease, border-color .24s ease; }
.card__ico { transition: transform .24s var(--ease); }
.symptoms li { transition: transform .2s var(--ease), box-shadow .2s ease; }
.tab { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.pricetable tbody tr { transition: background-color .16s ease; }
.wa { transition: transform .2s var(--ease); }
.faq summary { transition: color .18s ease; }
.field input, .field select, .field textarea { transition: border-color .18s ease, box-shadow .18s ease; }

.btn:active, .tab:active { transform: translateY(1px); }
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--sky-rgb), .18);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-hi); }
  .card:hover .card__ico { transform: scale(1.1) rotate(-4deg); }
  .pack--featured:hover { border-color: var(--deep); }
  .symptoms li:hover { transform: translateX(3px); box-shadow: var(--shadow-1); }
  .pricetable tbody tr:hover { background: var(--mist); }
  .btn--primary:hover { box-shadow: 0 8px 22px rgba(var(--deep-rgb), .26); }
  .btn--call:hover    { box-shadow: 0 8px 22px rgba(var(--pulse-rgb), .30); }
  .btn--ghost:hover   { box-shadow: var(--shadow-1); }
  .faq summary:hover  { color: var(--sky); }
  .wa:hover { transform: scale(1.07); }
}

/* 17.6 Butonul WhatsApp — un singur inel care se stinge ----------------- */
@keyframes waRing {
  0%        { box-shadow: 0 0 0 0 rgba(var(--wa-rgb), .5); }
  60%, 100% { box-shadow: 0 0 0 18px rgba(var(--wa-rgb), 0); }
}
.wa::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: waRing 3.4s var(--ease) infinite;
}

/* 17.7 Acordeon FAQ ----------------------------------------------------- */
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } }
.faq details[open] > :not(summary) { animation: faqIn .3s ease both; }
.faq summary::after { transition: transform .28s var(--ease); }

/* Browserele noi animează chiar înălțimea, deci răspunsul se desface lin. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .34s var(--ease), content-visibility .34s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
  .faq details[open] > :not(summary) { animation: none; }
}

/* 17.8 Sertarul mobil: linkurile intră unul după altul ------------------ */
.drawer[data-open="true"] .drawer__link,
.drawer[data-open="true"] .drawer__foot > * { animation: rise .34s var(--ease) backwards; }
.drawer[data-open="true"] .drawer__link:nth-of-type(1) { animation-delay: .06s; }
.drawer[data-open="true"] .drawer__link:nth-of-type(2) { animation-delay: .11s; }
.drawer[data-open="true"] .drawer__link:nth-of-type(3) { animation-delay: .16s; }
.drawer[data-open="true"] .drawer__link:nth-of-type(4) { animation-delay: .21s; }
.drawer[data-open="true"] .drawer__link:nth-of-type(5) { animation-delay: .26s; }
.drawer[data-open="true"] .drawer__foot > * { animation-delay: .30s; }

/* 17.9 Taburi de prețuri: panoul nou apare în locul unei clipiri -------- */
[role="tabpanel"]:not(.hidden) { animation: riseSmall .32s var(--ease); }

/* 17.10 Mesajul formularului: apare, nu se teleportează ----------------- */
.form__status[data-kind] { animation: riseSmall .3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ecg--draw path, .ecg.reveal path { stroke-dashoffset: 0; }
  /* JS nu adaugă .reveal în acest caz; regula de mai jos e doar plasă de siguranță. */
  .reveal { opacity: 1 !important; transform: none !important; }
  .hdr__progress, .wa::before { display: none; }
}

@media print {
  .hdr, .actionbar, .wa, .foot, .map, .btn { display: none !important; }
  body { font-size: 12pt; }
  .pricetable { border: 1px solid #999; }
}