/* ==========================================================================
   KIT · core.css — mecanica comuna a tuturor site-urilor (NU aspectul).
   Aspectul vine din clienti/<c>/theme.css, care se lipeste DUPA acest fisier.
   Tokenuri pe care theme.css trebuie sa le defineasca in :root:
     --bg --ink --ink-soft --accent --accent-ink (text pe accent) --line --card
     --f-d (titluri) --f-b (text) --r (colturi) --nav-h
   Lectii iOS incluse: --vh masurat o data, blocare cu position:fixed, benzi prin transform.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --pad: 20px; --wrap: 1240px; --vh: 100vh; --nav-h: 68px; --r: 16px;
}
@media (min-width: 700px) { :root { --pad: 32px; } }
@media (min-width: 1100px) { :root { --pad: 48px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-b, system-ui); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.is-locked { position: fixed; left: 0; right: 0; overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ico { display: inline-flex; width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.ico svg { width: 100%; height: 100%; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); position: relative; z-index: 1; }
section { position: relative; padding-block: 88px; }
@media (min-width: 900px) { section { padding-block: 128px; } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 120; padding: 10px 16px; background: var(--ink); color: var(--bg); transition: top 200ms var(--ease-out); }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* poze: culoarea medie tine locul pana se incarca */
.pic { position: relative; overflow: hidden; border-radius: var(--r); isolation: isolate; }
.pic img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 520ms var(--ease-out); }
.pic img.is-loaded, .no-js .pic img { opacity: 1; }

/* titluri care urca din spatele unei masti */
.lines > span { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines > span > i { display: block; font-style: normal; }
.gsap-on .lines > span > i { transform: translate3d(0, 105%, 0); }
.gsap-on .rise:not(.is-in) { opacity: 0; transform: translateY(26px); }

/* ---------- meniu pe tot ecranul (aspectul in tema) ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 96; }
.menu { position: fixed; inset: 0; z-index: 90; visibility: hidden; opacity: 0; transition: opacity 260ms var(--ease-out), visibility 0s 260ms; }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease-out); }
.menu-inner { height: 100%; overflow-y: auto; padding: calc(var(--nav-h) + 40px) var(--pad) 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.menu-nav { display: flex; flex-direction: column; }
.menu-nav a { opacity: 0; transform: translateY(24px); transition: opacity 320ms var(--ease-out), transform 400ms var(--ease-out); }
.menu.is-open .menu-nav a { opacity: 1; transform: none; }
.menu.is-open .menu-nav a:nth-child(2) { transition-delay: 40ms; } .menu.is-open .menu-nav a:nth-child(3) { transition-delay: 80ms; }
.menu.is-open .menu-nav a:nth-child(4) { transition-delay: 120ms; } .menu.is-open .menu-nav a:nth-child(5) { transition-delay: 160ms; }
.menu.is-open .menu-nav a:nth-child(6) { transition-delay: 200ms; }
.burger { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.burger span { position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform 320ms var(--ease-in-out); }
.burger span:nth-child(1) { transform: translateY(-5px); } .burger span:nth-child(2) { transform: translateY(5px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
@media (min-width: 1000px) { .burger { display: none; } }

/* ---------- bara de jos pe telefon ---------- */
.cta-jos { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 94; display: flex; gap: 6px; padding: 6px; transform: translateY(140%); transition: transform 460ms var(--ease-drawer); }
.cta-jos.se-vede { transform: none; }
.cta-jos > * { flex: 1; justify-content: center; }
@media (min-width: 1000px) { .cta-jos { display: none; } }

/* ---------- fereastra: foaie de jos pe telefon, dialog pe desktop ---------- */
.modal { position: fixed; inset: 0; z-index: 100; visibility: hidden; transition: visibility 0s 280ms; }
.modal.is-open { visibility: visible; transition: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 400ms var(--ease-out); }
.modal.is-open .modal-scrim { opacity: 1; }
.modal-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92%; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-radius: calc(var(--r) + 10px) calc(var(--r) + 10px) 0 0; padding: 8px 8px calc(24px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 500ms var(--ease-drawer); }
.modal.is-open .modal-panel { transform: none; }
.modal:not(.is-open) .modal-panel { transition-duration: 260ms; transition-timing-function: var(--ease-out); }
.modal:not(.is-open) .modal-scrim { transition-duration: 220ms; }
.modal-panel::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 9px; background: var(--line); margin: 6px auto 10px; }
@media (min-width: 900px) {
  .modal-panel { left: 50%; top: 50%; right: auto; bottom: auto; width: min(1000px, calc(100% - 64px)); max-height: calc(100% - 64px); border-radius: var(--r); padding: 8px; transform: translate(-50%, -46%) scale(0.97); opacity: 0; transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out); }
  .modal.is-open .modal-panel { transform: translate(-50%, -50%); opacity: 1; }
  .modal-panel::before { display: none; }
}
.modal-close { position: absolute; right: 16px; top: 16px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: calc(var(--r) / 2); background: var(--ink); color: var(--bg); transition: transform 160ms var(--ease-out); }
.modal-close:active { transform: scale(0.94); }
.modal-grid { display: grid; gap: 8px; }
@media (min-width: 900px) { .modal-grid { grid-template-columns: 0.95fr 1.05fr; } }
.modal-media .pic { aspect-ratio: 16 / 11; }
@media (min-width: 900px) { .modal-media .pic { aspect-ratio: auto; height: 100%; min-height: 480px; } }
.modal-body { padding: 18px 16px 8px; }
@media (min-width: 900px) { .modal-body { padding: 40px 32px 30px; } }
.modal-body h3 { margin: 0; padding-right: 48px; }
.puncte { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.puncte li { display: flex; gap: 10px; align-items: flex-start; }
.puncte .ico { color: var(--accent); margin-top: 3px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- banda care curge (data-banda) ---------- */
.banda { overflow: hidden; touch-action: pan-y; cursor: grab; }
.banda.se-trage { cursor: grabbing; }
.banda-sina { display: flex; gap: 10px; width: max-content; will-change: transform; }
.banda-sina > * { flex: 0 0 auto; user-select: none; }
.tehnici { overflow: hidden; position: relative; z-index: 1; }
.tehnici-sina { display: flex; width: max-content; will-change: transform; }
.tehnici-grup { display: flex; align-items: center; gap: 30px; padding-right: 30px; white-space: nowrap; }

/* ---------- pista orizontala (data-pista-track) ---------- */
.pista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px var(--pad) 8px; margin-inline: calc(var(--pad) * -1); scrollbar-width: none; overscroll-behavior-x: contain; }
.pista::-webkit-scrollbar { display: none; }
.pista > * { flex: 0 0 auto; scroll-snap-align: start; }
.pista-bar { height: 2px; margin-top: 24px; background: var(--line); overflow: hidden; }
.pista-bar i { display: block; height: 100%; background: var(--accent); }

/* carusel (recenzii, poze): structura comuna; aspectul vine din theme.css */
.carusel { position: relative; }
.carusel-jos { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.carusel-jos .pista-bar { flex: 1; margin-top: 0; }
.carusel-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.car-b { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); background: none; color: inherit; cursor: pointer; transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; }
.car-b:active { transform: scale(0.96); }
.carusel .pista { padding-top: 0; padding-bottom: 4px; }
.carusel .pista > * { scroll-snap-align: center; }
.rec-c blockquote { margin: 0; }
.rec-c figcaption span { display: block; margin-top: 4px; opacity: 0.7; }

/* ---------- comparatie antes/despues (data-comp) ---------- */
.comp-stage { position: relative; overflow: hidden; border-radius: var(--r); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.comp-stage .pic { border-radius: 0; aspect-ratio: 1 / 1; }
.comp-stage .pic img { pointer-events: none; object-position: 50% 32%; }
.comp-dupa { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x, 50%)); }
.comp-dupa .pic { height: 100%; }
.comp-linie { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.comp-maner { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); pointer-events: none; }
.comp-eti { position: absolute; top: 12px; z-index: 2; padding: 5px 11px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.9); color: #111; pointer-events: none; }
.comp-eti.st { left: 12px; } .comp-eti.dr { right: 12px; background: var(--accent); color: var(--accent-ink, #fff); }

/* ---------- usi care se deschid (data-usi) ---------- */
.usi { height: calc(var(--vh) * 2); padding: 0; }
.usi-stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.usi-fond, .usi-fond .pic { position: absolute; inset: 0; border-radius: 0; }
.usa { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; overflow: hidden; }
.usa.st { left: 0; } .usa.dr { right: 0; }
.usa .pic { position: absolute; inset: 0; border-radius: 0; }
.usi-text { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 2; text-align: center; padding-inline: var(--pad); }
.no-js .usa, .no-motion .usa { display: none; }
.no-js .usi, .no-motion .usi { height: var(--vh); }

/* ---------- carduri lipite care se suprapun (data-stack, doar ecran lat) ---------- */
@media (min-width: 900px) and (min-height: 760px) { [data-stack] > * { position: sticky; top: calc(var(--nav-h) + 40px); transform-origin: 50% 0; } }

/* ---------- galerie cu filtre ---------- */
.masonry { columns: 2; column-gap: 10px; }
@media (min-width: 800px) { .masonry { columns: 3; column-gap: 14px; } }
@media (min-width: 1180px) { .masonry { columns: 4; } }
.masonry figure { margin: 0 0 10px; break-inside: avoid; }
@media (min-width: 800px) { .masonry figure { margin-bottom: 14px; } }
.masonry figure[hidden] { display: none; }
.filtre { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad) 12px; scrollbar-width: none; }
.filtre::-webkit-scrollbar { display: none; }
.filtre button { flex: 0 0 auto; }

/* ---------- intrebari ---------- */
.q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.q summary::-webkit-details-marker { display: none; }
.q .plus { display: grid; place-items: center; flex: 0 0 auto; transition: transform 280ms var(--ease-out); }
.q[open] .plus { transform: rotate(45deg); }
.q-body { overflow: hidden; }

/* ---------- formular ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--card, #fff); border: 0; border-radius: calc(var(--r) / 2); padding: 14px 16px; box-shadow: inset 0 0 0 1.5px var(--line); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
.field[data-error] input { box-shadow: inset 0 0 0 2px #C0182B; }
.field .err { font-size: 13.5px; color: #B0122A; }

/* program: ziua de azi */
.orar { list-style: none; margin: 0; padding: 0; }
.orar li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.orar li:last-child { border-bottom: 0; }

/* intro si trecerea intre pagini */
.intro { position: fixed; inset: 0; z-index: 130; pointer-events: none; animation: kit-intro-plasa 0s 3.5s forwards; }
@keyframes kit-intro-plasa { to { visibility: hidden; opacity: 0; } }
/* .no-motion NU mai ascunde intro-ul: la reduced-motion el ruleaza ca simpla stingere
   de opacitate (vezi introSimplu in core.js). Fara JS ramane ascuns, ca sa nu acopere pagina. */
.no-js .intro { display: none; }
.tranzitie { position: fixed; inset: 0; z-index: 125; pointer-events: none; opacity: 0; background: var(--bg); transition: opacity 240ms var(--ease-out); }
.tranzitie.se-vede { opacity: 1; }

/* comutatorul de limba din bara de sus (site in mai multe limbi) */
.limbi { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.limbi a { padding: 6px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-mute, #8a8a8a); transition: color 180ms ease, background-color 180ms ease; }
.limbi a[aria-current] { background: var(--ink, #111); color: var(--bg, #fff); }
@media (hover: hover) and (pointer: fine) { .limbi a:hover { color: var(--ink, #111); } }

/* datele firmei (imprint), cerute de directiva comertului electronic: pe fiecare pagina */
.imprint { background: var(--var, #f1f1f1); padding: 16px var(--pad) 18px; }
.imprint-t, .imprint-r { max-width: var(--wrap); margin-inline: auto; }
.imprint-t { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute, #888); margin-bottom: 8px; }
.imprint-r { display: flex; flex-wrap: wrap; gap: 3px 18px; font-size: 12.2px; line-height: 1.6; color: var(--ink-soft, #555); }
.imprint-r b { font-weight: 600; color: var(--ink, #111); }
.imprint-r a { text-decoration: underline; }
.priv-imprint { background: transparent; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-top: 14px; }

/* bara de cookies + pagina de confidentialitate (generate de kit pentru orice client) */
.cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 120; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; padding: 14px 16px; border-radius: var(--r); background: var(--panou, #fff); color: var(--ink, #111); border: 1px solid var(--line, rgba(0,0,0,.12)); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(14px); transition: opacity 300ms ease, transform 300ms ease; }
.cookie.se-vede { opacity: 1; transform: none; }
.cookie p { flex: 1 1 230px; margin: 0; font-size: 13.2px; line-height: 1.5; }
.cookie p a { text-decoration: underline; }
.cookie button { flex: 0 0 auto; min-height: 42px; padding: 0 22px; border-radius: 999px; background: var(--ink, #111); color: var(--panou, #fff); font-size: 13px; font-weight: 600; }
.cookie button:active { transform: scale(0.97); }
@media (min-width: 760px) { .cookie { left: auto; right: 20px; bottom: 20px; max-width: 440px; } }

.priv { max-width: 74ch; }
.priv-titlu { font-size: clamp(1.9rem, 6vw, 3rem); }
.priv-lead { margin-top: 12px; color: var(--ink-soft); }
.priv-h { margin-top: 34px; font-size: clamp(1.05rem, 3.4vw, 1.35rem); }
.priv-p { margin-top: 10px; line-height: 1.68; color: var(--ink-soft); }
.priv-p a { color: var(--accent); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .menu, .menu-nav a, .modal-panel, .modal-scrim, .cta-jos, .tranzitie { transition-duration: 160ms !important; transition-delay: 0s !important; }
  .menu-nav a { transform: none !important; }
  .modal-panel { transform: none !important; }
  @media (min-width: 900px) { .modal-panel { transform: translate(-50%, -50%) !important; } }
}

/* ===== tema karly-studio ===== */
/* KARLY STUDIO · uñas, pestañas y cejas · Valladolid.
   Ideea vine din vorbele LOR: "Realzando tu mirada y tus manos con arte". Deci site-ul e
   impartit in doua: TU MIRADA si TUS MANOS. Atat. Nimic altceva de inteles.
   Paleta vine din logo-ul lor: roz pal, scrisul negru, si portocaliul fluturelui monarh ca
   accent mic. Pozele lor de unghii sunt aproape toate pe satin alb, deci fundalul deschis li
   se potriveste.
   Diferit de ceilalti clienti: aici colturile sunt ROTUNDE si mari, fundalul e roz pal si
   formele sunt moi. La ultimii trei clienti totul era cu colturi drepte.
   Userul a cerut: putine animatii, bine structurat, text putin. */
:root {
  --bg: #FBF4F5; --panou: #FFFFFF; --var: #F6E7EA;
  --ink: #1C1418; --ink-soft: #6A5A60; --ink-mute: #A2929A;
  --accent: #B33A5B; --accent-2: #E08A2E; --accent-ink: #FFFFFF;
  --line: rgba(28, 20, 24, 0.12); --line-tare: rgba(28, 20, 24, 0.26);
  --f-d: 'DM Serif Display', Georgia, serif;
  --f-b: 'Outfit', system-ui, sans-serif;
  --r: 22px; --nav-h: 68px;
}
body { font-family: var(--f-b); font-size: 16.5px; background: var(--bg); color: var(--ink); }
a, button, summary, label { touch-action: manipulation; }
button, .btn { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4 { font-family: var(--f-d); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(2.6rem, 10vw, 5.6rem); }
h2 { font-size: clamp(2rem, 6.5vw, 3.6rem); }
h3 { font-size: clamp(1.2rem, 3.4vw, 1.6rem); }
p { margin: 0; }
em { font-style: italic; color: var(--accent); }
section { padding-block: 56px; }
@media (min-width: 900px) { section { padding-block: 88px; } }

.eti { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--var); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.lead { font-size: clamp(1rem, 2.3vw, 1.1rem); color: var(--ink-soft); max-width: 44ch; margin-top: 14px; line-height: 1.66; }
.mic { font-size: 13px; color: var(--ink-mute); }
.s-head { margin-bottom: 30px; }
.s-head.mijloc { text-align: center; }
.s-head.mijloc .lead { margin-inline: auto; }

/* butoane rotunde, moi */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; transition: background-color 240ms ease, transform 140ms ease; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--accent); } }
.btn:active { transform: scale(0.98); }
.btn-2 { background: var(--panou); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-tare); }
@media (hover: hover) and (pointer: fine) { .btn-2:hover { background: var(--ink); color: #fff; box-shadow: none; } }
.btn-alb { background: #fff; color: var(--ink); }

/* bara de sus */
.nav { background: var(--bg); border-bottom: 1px solid var(--line); }
@media (min-width: 1000px) { .nav { background: rgba(251, 244, 245, .92); backdrop-filter: blur(10px); } }
.nav-inner { display: flex; align-items: center; gap: 14px; height: var(--nav-h); max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.logo { margin-right: auto; display: flex; align-items: center; gap: 10px; }
.logo-semn { width: 42px; height: 42px; border-radius: 50%; }
.logo b { font-family: var(--f-d); font-weight: 400; font-size: 19px; }
.nav-links { display: none; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--ink-soft); }
.nav-links a[aria-current], .nav-links a:hover { color: var(--accent); }
.nav-cta { display: none; min-height: 42px; padding: 0 20px; font-size: 13px; }
@media (min-width: 1000px) { .nav-links, .nav-cta { display: inline-flex; } }
.burger > span { background: var(--ink); }

/* meniu */
.menu { background: var(--bg); }
.menu-inner { padding-top: calc(var(--nav-h) + 22px); padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.menu-nav a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.menu-t { font-family: var(--f-d); font-size: clamp(2rem, 8.5vw, 3.2rem); }
.menu-nav a[aria-current] .menu-t { color: var(--accent); }
.menu-nav small { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--ink-mute); }
.menu-jos { display: grid; gap: 14px; justify-items: start; margin-top: 28px; }
.menu-contacte { display: grid; gap: 10px; }
.menu-contacte a, .menu-contacte span { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 14.5px; }
.menu-contacte .ico { color: var(--accent); }
.cta-jos { background: var(--bg); padding: 7px; border-top: 1px solid var(--line); }
.cta-jos .btn { min-height: 46px; padding: 0 14px; font-size: 13px; }
@media (max-width: 999px) { body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } }

/* ===== HERO ===== */
.hero { padding: 0; }
.hero-in { padding: calc(var(--nav-h) + 40px) var(--pad) 0; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; text-align: center; }
.hero-semn { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 22px; display: block; }
.hero h1 { max-width: 14ch; margin-inline: auto; }
.hero h1 em { color: var(--accent); }
.hero-sub { margin: 20px auto 0; font-size: clamp(.98rem, 2.6vw, 1.14rem); line-height: 1.6; color: var(--ink-soft); max-width: 34ch; }
.hero-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.hero-poza { margin-top: 44px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; }
.hero-poza .pic { aspect-ratio: 16 / 11; }
.hero-poza img { object-position: 50% 42%; }
@media (min-width: 900px) {
  .hero-in { padding-top: calc(var(--nav-h) + 68px); }
  .hero-semn { width: 108px; height: 108px; }
  .hero-poza { margin-top: 60px; border-radius: var(--r); }
  .hero-poza .pic { aspect-ratio: 21 / 9; }
}

/* ===== cele doua jumatati: mirada si manos ===== */
.jumatati { display: grid; gap: 16px; }
@media (min-width: 860px) { .jumatati { grid-template-columns: 1fr 1fr; gap: 20px; } }
.jum-c { background: var(--panou); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.jum-c .pic { aspect-ratio: 4 / 3; }
.jum-txt { padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.jum-txt h3 { font-size: clamp(1.5rem, 5vw, 2rem); }
.jum-lista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.jum-lista li { padding: 6px 13px; border-radius: 999px; background: var(--var); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.jum-txt .btn { margin-top: auto; align-self: flex-start; }

/* ===== galerie ===== */
.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .galerie { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1150px) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--panou); }
.galerie .pic { aspect-ratio: 4 / 5; }
.galerie img { transition: transform 800ms cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .galerie figure:hover img { transform: scale(1.04); } }

.banda-lucrari figure { margin: 0; width: 54vw; max-width: 260px; border-radius: var(--r); overflow: hidden; }
.banda-lucrari .pic { aspect-ratio: 4 / 5; }
.banda-lucrari .banda-sina { gap: 10px; }

/* ===== recenzii ===== */
.banda-rec .banda-sina { gap: 12px; align-items: stretch; }
.rec-c { margin: 0; width: 76vw; max-width: 340px; background: var(--panou); border-radius: var(--r); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .rec-c { width: 360px; } }
.rec-stele { display: flex; gap: 2px; color: var(--accent-2); }
.rec-stele svg { width: 15px; height: 15px; }
.rec-c blockquote { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
.rec-c figcaption { margin-top: auto; }
.rec-c figcaption b { display: block; font-size: 12.5px; font-weight: 600; }
.rec-c figcaption span { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-mute); }
.nota-mare { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-top: 22px; }
.nota-mare b { font-family: var(--f-d); font-size: clamp(2.6rem, 9vw, 4rem); color: var(--accent); line-height: 1; }
.nota-mare span { font-size: 13.5px; color: var(--ink-soft); }

/* ===== practic: program si unde ===== */
.practic { display: grid; gap: 16px; }
@media (min-width: 860px) { .practic { grid-template-columns: 1fr 1fr; gap: 20px; } }
.card { background: var(--panou); border-radius: var(--r); padding: 26px 24px; }
.card h3 { margin-bottom: 16px; }
.orar { margin: 0; }
.orar li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.orar li:last-child { border-bottom: 0; }
.orar li.is-azi { color: var(--accent); font-weight: 600; }
.info-lista { display: grid; gap: 10px; }
.info-lista a, .info-lista div { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 14.6px; }
.info-lista .ico { color: var(--accent); flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) { .info-lista a:hover { color: var(--accent); } }

/* intrebari */
.q { border-bottom: 1px solid var(--line); }
.q summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--f-d); font-size: 1.1rem; }
.q summary::-webkit-details-marker { display: none; }
.q .plus { color: var(--accent); }
.q .q-body { padding-bottom: 18px; font-size: 14.5px; line-height: 1.64; color: var(--ink-soft); max-width: 60ch; }

/* subsol */
.foot { background: var(--ink); color: #fff; padding-block: 52px 26px; border-radius: var(--r) var(--r) 0 0; }
.foot h4 { font-family: var(--f-b); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 12px; }
.foot-mare { font-family: var(--f-d); font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.1; margin-bottom: 26px; }
.foot-mare em { color: #F3B7C6; }
.foot-col { display: grid; gap: 24px; margin-top: 36px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
@media (min-width: 760px) { .foot-col { grid-template-columns: repeat(3, 1fr); } }
.foot-col a, .foot-col span { display: block; padding: 4px 0; color: rgba(255,255,255,.74); font-size: 14.2px; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { color: #F3B7C6; } }
.foot-mic { margin-top: 26px; font-size: 11.5px; color: rgba(255,255,255,.45); }
.foot-mic a { color: rgba(255,255,255,.65); text-decoration: underline; }

/* intro: logo-ul lor, o singura data */
.intro { background: var(--bg); display: grid; place-items: center; }
.intro-in { text-align: center; padding-inline: var(--pad); }
.intro-semn { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 20px; display: block; }
.intro-in small { display: block; font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .intro-semn { opacity: 0; transform: scale(.86); animation: kr-semn 700ms cubic-bezier(.23,1,.32,1) 60ms forwards; }
  .intro-in small { opacity: 0; animation: kr-apare 560ms cubic-bezier(.23,1,.32,1) 440ms forwards; }
}
@keyframes kr-semn { to { opacity: 1; transform: none; } }
@keyframes kr-apare { from { transform: translateY(10px); } to { transform: none; opacity: 1; } }

/* partea legala, in cheia site-ului */
.cookie { border-radius: var(--r); }
.cookie button { border-radius: 999px; background: var(--ink); color: #fff; }
.imprint { background: var(--var); }
.priv-titlu { font-size: clamp(2rem, 7vw, 3.2rem); }