/*
  Shinrai Longevity Institute — sistemul de design.

  Culorile și tipografia vin din brief (§33, §34). Verdele închis este folosit
  strategic — CTA-uri, accente de navigație, secțiuni premium, footer, zona de
  parteneriate — pe fond cald de ivory și champagne; brieful cere explicit ca
  site-ul să NU fie verde în întregime.

  Fonturile sunt găzduite local, nu de la Google. Un site care cere fonturi de pe
  un server terț trimite adresa IP a fiecărui vizitator acolo înainte ca acesta
  să apuce să accepte ceva — ceea ce ar contrazice chiar capitolul de GDPR al
  brief-ului (§32).
*/

/* ------------------------------- fonturi -------------------------------- */

/*
  Titluri: MARCELLUS, nu Italiana.

  Brieful cere Italiana (§34), dar acel font acoperă doar U+0000-00FF plus câteva
  semne: nu are „ă", „ș" și „ț". Pe un site integral în română, aproape fiecare
  titlu le conține („SĂNĂTĂȚII", „ȘTIINȚĂ"), iar literele lipsă ar fi împrumutate
  din alt font, în mijlocul cuvântului — vizibil greșit pe un site premium.

  Marcellus este capitala romană clasică cea mai apropiată ca spirit și acoperă
  complet româna. Italiana rămâne potrivită pentru shinrailongevity.com, care e
  în engleză. Schimbarea înapoi înseamnă o singură linie: variabila --titlu.

  Fonturile sunt găzduite local, nu de la Google: altfel adresa IP a fiecărui
  vizitator ar pleca spre un server terț înainte să apuce să accepte ceva, ceea
  ce ar contrazice chiar capitolul de GDPR al brief-ului (§32).

  Fiecare font are două fișiere — `latin` și `latin-ext`. Al doilea conține
  exclusiv caracterele cu diacritice: fără el, româna nu se afișează; fără
  primul, nu se afișează restul alfabetului.
*/

@font-face {
  font-family: "Marcellus";
  src: url("/assets/fonts/marcellus-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Marcellus";
  src: url("/assets/fonts/marcellus-regular-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-regular-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-medium-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-semibold-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-semibold-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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;
}

/* --------------------------------- baza --------------------------------- */

:root {
  --champagne: #efe6da;
  --blush: #d8c2b8;
  --mocca: #9d7f71;
  --espresso: #3a2f2a;
  --ivory: #f8f4ee;
  --forest: #173b32;
  --forest-clar: #1f4f43;

  --text: var(--espresso);
  --text-slab: #6d605a;
  --linie: #e2d8cc;

  --titlu: "Marcellus", "Iowan Old Style", Palatino, Georgia, serif;
  --corp: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --masura: 1180px;
  --ingust: 760px;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: var(--corp);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mocca); }

h1, h2, h3, h4 {
  font-family: var(--titlu);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0 0 0.6em;
  color: var(--forest);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* eticheta mică, cu spațiere largă — accentul „premium" din brief */
.eticheta {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mocca);
  margin: 0 0 0.9rem;
}

.masura { max-width: var(--masura); margin: 0 auto; padding: 0 1.5rem; }
.ingust { max-width: var(--ingust); }

.sectiune { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.sectiune--champagne { background: var(--champagne); }
.sectiune--forest { background: var(--forest); color: var(--champagne); }
.sectiune--forest h2,
.sectiune--forest h3 { color: #fff; }
.sectiune--forest .eticheta { color: var(--blush); }
.sectiune--forest a { color: var(--blush); }

/* sari la conținut — pentru navigarea de la tastatură */
.sari {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--forest);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.sari:focus { left: 0; }

:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.sectiune--forest :focus-visible,
.subsol :focus-visible { outline-color: var(--blush); }

/* -------------------------------- butoane -------------------------------- */

.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--corp);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
@media (prefers-reduced-motion: reduce) { .buton { transition: none; } }

.buton--primar { background: var(--forest); color: #fff; }
.buton--primar:hover { background: var(--forest-clar); color: #fff; }

.buton--contur { background: transparent; color: var(--forest); border-color: var(--forest); }
.buton--contur:hover { background: var(--forest); color: #fff; }

.buton--clar { background: var(--champagne); color: var(--forest); }
.buton--clar:hover { background: #fff; color: var(--forest); }

.butoane { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------- antet --------------------------------- */

.antet {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 244, 238, 0.94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--linie);
}

.antet__bara {
  max-width: var(--masura);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.marca { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.marca__semn { width: 34px; height: 34px; color: var(--forest); flex: none; }
.marca__text { display: flex; flex-direction: column; line-height: 1.05; }
.marca__nume { font-family: var(--titlu); font-size: 1.45rem; color: var(--forest); }
.marca__sub {
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mocca);
  margin-top: 2px;
}

.nav { display: none; margin-left: auto; }
.nav ul { display: flex; gap: 1.15rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  /* elementele de meniu nu au voie să se rupă în două rânduri: „Pentru clienți"
     spart peste rânduri face antetul să pară stricat */
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--espresso);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--forest); border-bottom-color: var(--blush); }
.nav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--forest); }

.antet__actiuni { display: none; gap: 0.6rem; align-items: center; }
.antet__telefon {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--espresso);
  text-decoration: none;
  white-space: nowrap;
}
.antet__telefon:hover { color: var(--forest); }

.meniu-buton {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  font-family: var(--corp);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--espresso);
  cursor: pointer;
}

.meniu-mobil {
  border-top: 1px solid var(--linie);
  background: var(--ivory);
  padding: 1rem 1.5rem 1.5rem;
}
.meniu-mobil ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.meniu-mobil li + li { border-top: 1px solid var(--linie); }
.meniu-mobil a {
  display: block;
  padding: 0.8rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--espresso);
  text-decoration: none;
}
.meniu-mobil .buton { width: 100%; margin-bottom: 0.6rem; }

/*
  Pragurile sunt alese după conținut, nu după valori rotunde.

  Cu nouă intrări de meniu, un număr de telefon și un buton de 25 de caractere,
  totul intră pe un rând abia peste 1240px — și doar fără telefon. Telefonul
  reapare de la 1560px, unde chiar mai e loc. Sub 1240px rămâne sertarul, care
  e oricum mai comod decât un meniu înghesuit.

  În antet, textele nu au voie să se rupă: un buton pe trei rânduri sau „Pentru
  clienți" spart în două fac bara să pară stricată. În rest, butoanele se rup
  normal — „Descoperă serviciile pentru clienți" nu are cum să încapă pe un rând
  pe un telefon.
*/
.nav a,
.antet__actiuni .buton,
.antet__telefon { white-space: nowrap; }

@media (min-width: 1240px) {
  .nav { display: block; }
  .antet__actiuni { display: flex; }
  .meniu-buton { display: none; }
  .meniu-mobil { display: none !important; }
  .nav ul { gap: 0.85rem; }
  .nav a { font-size: 0.76rem; }
  .antet__telefon { display: none; }
  .antet__actiuni .buton { padding: 0.75rem 1.05rem; font-size: 0.72rem; }
}

@media (min-width: 1560px) {
  .nav ul { gap: 1.15rem; }
  .nav a { font-size: 0.8rem; }
  .antet__telefon { display: inline; }
  .antet__actiuni .buton { padding: 0.85rem 1.6rem; font-size: 0.82rem; }
}

/* --------------------------------- hero ---------------------------------- */

.hero {
  background: linear-gradient(170deg, var(--champagne) 0%, var(--ivory) 62%);
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--linie);
}
.hero h1 { max-width: 17ch; }
.hero__subtitlu {
  max-width: 56ch;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  color: var(--text-slab);
  margin-bottom: 2rem;
}

/* pagini interioare: antet mai scurt */
.capat {
  background: var(--champagne);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-bottom: 1px solid var(--linie);
}
.capat p { max-width: 62ch; color: var(--text-slab); margin-top: 0.5rem; }

/* --------------------------------- grile --------------------------------- */

.grila { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grila--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .grila--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grila--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .grila--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .grila--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-slab); font-size: 0.95rem; }
.card .buton { margin-top: auto; align-self: flex-start; }
.card > p:last-of-type { margin-bottom: 1.25rem; }

.sectiune--forest .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(216, 194, 184, 0.25);
}
.sectiune--forest .card p { color: var(--blush); }

/* card de serviciu, cu linia de accent */
.card--serviciu { border-left: 3px solid var(--blush); }
.card--serviciu:hover { border-left-color: var(--forest); }

/* ------------------------------- enumerări ------------------------------- */

.jetoane { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.jetoane li {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  color: var(--text-slab);
}
.sectiune--forest .jetoane li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(216, 194, 184, 0.3);
  color: var(--champagne);
}

.lista-puncte { list-style: none; margin: 0; padding: 0; }
.lista-puncte li { position: relative; padding-left: 1.35rem; margin-bottom: 0.55rem; color: var(--text-slab); }
.lista-puncte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mocca);
}
.sectiune--forest .lista-puncte li { color: var(--champagne); }
.sectiune--forest .lista-puncte li::before { background: var(--blush); }

/* listă de ritualuri: nume + subtitlu */
.ritualuri { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ritualuri li { padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.ritualuri li:first-child { border-top: 1px solid var(--linie); }
.ritualuri b { display: block; font-weight: 600; font-size: 0.98rem; }
.ritualuri span { font-size: 0.9rem; color: var(--mocca); }

/* ------------------------------ text lung -------------------------------- */

.proza h2 { margin-top: 2.5rem; }
.proza h2:first-child { margin-top: 0; }
.proza h3 { margin-top: 1.75rem; }
.proza p, .proza li { color: var(--text-slab); }
.proza ul { padding-left: 1.2rem; }
.proza li { margin-bottom: 0.4rem; }

/* ------------------------------- formulare ------------------------------- */

.formular { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .formular--2 { grid-template-columns: repeat(2, 1fr); } }
.camp--lat { grid-column: 1 / -1; }

.camp label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mocca);
  margin-bottom: 0.4rem;
}
.camp input,
.camp select,
.camp textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--corp);
  font-size: 0.95rem;
  color: var(--espresso);
}
.camp textarea { min-height: 130px; resize: vertical; }
.camp input:focus, .camp select:focus, .camp textarea:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(23, 59, 50, 0.1);
}

.consimtamant {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--text-slab);
  line-height: 1.55;
}
.consimtamant input { margin-top: 0.25rem; flex: none; width: auto; }

.formular__raspuns {
  grid-column: 1 / -1;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.formular__raspuns--ok { background: #e7f2ec; color: #17513c; }
.formular__raspuns--eroare { background: #fbeaea; color: #8f2c2c; }

/* capcană pentru roboți: invizibilă pentru oameni, completată de scripturi */
.capcana { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* -------------------------------- subsol --------------------------------- */

.subsol { background: var(--forest); color: var(--champagne); padding: 3.5rem 0 0; }
.subsol a { color: var(--champagne); text-decoration: none; }
.subsol a:hover { color: #fff; text-decoration: underline; }

.subsol__grila { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .subsol__grila { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .subsol__grila { grid-template-columns: 1.4fr repeat(4, 1fr); } }

.subsol h2 { font-size: 1.6rem; color: #fff; margin-bottom: 0.5rem; }
.subsol h3 {
  font-family: var(--corp);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 0.9rem;
}
.subsol ul { list-style: none; margin: 0; padding: 0; }
.subsol li { margin-bottom: 0.5rem; font-size: 0.9rem; }

.subsol__contact { font-size: 0.92rem; line-height: 1.9; }
.subsol__bara {
  margin-top: 3rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(216, 194, 184, 0.22);
  font-size: 0.8rem;
  color: #b6c6c0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}
.subsol__bara a { color: #b6c6c0; }

/* ---------------------------- bara de cookie ----------------------------- */

.cookie {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(58, 47, 42, 0.18);
  padding: 1.35rem;
}
.cookie p { font-size: 0.88rem; color: var(--text-slab); }
.cookie .butoane { margin-top: 1rem; }
.cookie .buton { font-size: 0.74rem; padding: 0.7rem 1.15rem; }

.cookie__optiuni { margin: 1rem 0 0; display: grid; gap: 0.7rem; }
.cookie__optiuni .consimtamant { font-size: 0.85rem; }

@media print {
  .antet, .subsol, .cookie, .buton { display: none !important; }
  body { background: #fff; }
}