/* =============================================================================
   magazin-detalii-lp.css — secțiunile de DETALII de sub mockup, portate din LP
   -----------------------------------------------------------------------------
   Până acum pagina de magazin se termina cu mockup-ul de telefon și bara de
   cumpărare. Cine voia să înțeleagă mai mult nu avea unde să citească — trebuia
   să se întoarcă pe landing page, adică să iasă din pâlnia de cumpărare.

   Cele patru secțiuni de aici sunt ordonate după întrebarea pe care o are
   cumpărătorul în acel moment, nu după cum arată bine:
     1. Cum funcționează  → „ce se întâmplă după ce plătesc?" (cu livrarea în 48h)
     2. Ce primești       → „ce iau concret pe 200 de lei?"
     3. Cât costă pe zi   → „merită?" (ancoră internă, vezi nota de mai jos)
     4. Cine e în spate   → „pot avea încredere?"
     5. Întrebări         → obiecțiile rămase, în acordeoane

   NOTĂ JURIDICĂ. Panoul „VS Nutriționist Clasic" din LP (`800+ lei`,
   `Economisești 75%`) NU e portat aici. Ancorarea de preț se face pe COSTUL PE ZI
   al ofertei noastre — la fel de puternică pentru conversie, fără comparație cu un
   furnizor. Motivul complet: `FOLLOW-UP-3-plan-compact/00-CITESTE-ASTA.md` §5.

   Regulile marcate „portate din LP" sunt copiate 1:1 din
   `LP + Onboarding redesign & implementare/nutritie-desktop/index.html`.
   Dacă acolo se schimbă limbajul vizual, se schimbă și aici.
   ============================================================================= */

/* ---- compat: variabilele LP care nu există în base-v6, scoped la secțiuni ---- */
.mgx-det {
  --lh-base: 1.55; --lh-h3: 1.25; --lh-snug: 1.14;
  --phone: 460px; --s5: 24px; --s6: 32px; --s7: 48px;
  --t-h2: 25px; --t-h3: 20px; --t-xs: 13px;
}
.mgx-det { margin-top: 44px; }
.mgx-det .wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.mgx-det + .mgx-det { margin-top: 40px; }

/* ---- apariția la derulare (portată din LP; pagina e acum lungă) ---- */
.mgx-det .reveal {
  opacity: 0; transform: translateY(18px) scale(.99);
  transition: opacity .55s var(--ease-emph), transform .6s var(--ease-emph);
}
.mgx-det .reveal.in { opacity: 1; transform: none; }

/* ============================ portate din LP ============================ */
.mgx-det .gt {font-family:var(--font-display)}
.mgx-det .num {font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1}
.mgx-det .kick {font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--muted)}
.mgx-det .lede {font-size:var(--t-base); line-height:var(--lh-base); color:var(--muted); max-width:34ch; margin-left:auto; margin-right:auto; letter-spacing:-.005em}
.mgx-det .lede b {color:var(--fg); font-weight:700}
.mgx-det .shead {text-align:center; max-width:36ch; margin:0 auto var(--s6)}
.mgx-det .shead h2 {font-size:var(--t-h2); line-height:var(--lh-snug); margin:8px 0 0}
.mgx-det .shead p {margin-top:10px}
/* SINGURA adăugire față de fișierul din livrabil (măsurată, nu presupusă).
   În replică `.shead p` are marginea de jos IMPLICITĂ de browser (1em) — regula de
   sus declară deliberat doar `margin-top`, deci designul o are. La noi stiva include
   `framework.bundle.css`, care resetează `p { margin: 0 }`, iar spațiul dintre lede
   și grilă ieșea cu 16px mai mic decât în design. Aceeași corecție e nevoie la
   `.pdesc` (magazin-program-lp.css) și la `#showcase .shead .lede`
   (magazin-showcase-lp.css) — sunt singurele trei locuri, verificate exhaustiv. */
.mgx-det .shead p {margin-bottom:1em}
.mgx-det .sep {height:1px; border:0; width:100%; max-width:var(--phone); margin:0 auto;
    background:linear-gradient(90deg,transparent,var(--hairline) 28%,var(--hairline) 72%,transparent)}
.mgx-det .ico {display:inline-flex; width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}
.mgx-det .free-pill {display:inline-flex; align-items:center; gap:7px; font-size:var(--t-2xs); font-weight:800; letter-spacing:.01em; color:var(--ok-text);
    background:rgba(var(--ok-rgb),.1); border:1px solid rgba(var(--ok-rgb),.3); border-radius:999px; padding:6px 13px}
.mgx-det .av {background:var(--grad); border-radius:50%; padding:2px; display:inline-flex; flex-shrink:0}
.mgx-det .av img {border-radius:50%; border:2px solid var(--bg); display:block; object-fit:cover}
.mgx-det .av-sm img {width:28px; height:28px}
.mgx-det .av-lg img {width:52px; height:52px; box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.mgx-det .ic .ico {width:21px; height:21px}
.mgx-det /* feature / step / benefit */
  .grid3 {display:grid; grid-template-columns:1fr; gap:12px}
.mgx-det .fcard {background:var(--card-fill); border:1px solid var(--card-bd); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-2),var(--inset-hi); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base)}
.mgx-det .fcard .ic {margin-bottom:12px}
.mgx-det .fcard .h {font-size:var(--t-base); font-weight:800; color:#fff; line-height:var(--lh-h3)}
.mgx-det .fcard .d {font-size:var(--t-sm); color:var(--muted); margin-top:6px; line-height:1.5; max-width:34ch}
.mgx-det .fcard:active {transform:scale(.99)}
@media (hover:hover) {
  .mgx-det .fcard:hover {transform:translateY(-2px); box-shadow:var(--sh-3),var(--inset-hi)}
}
.mgx-det .steps {display:grid; grid-template-columns:1fr; gap:0}
.mgx-det .step {display:flex; gap:14px; align-items:flex-start; padding:14px 0}
.mgx-det .step+.step {border-top:1px solid var(--hairline)}
.mgx-det .step .n {flex-shrink:0; width:34px; height:34px; border-radius:var(--r-sm); background:rgba(var(--accent-rgb),.14); color:var(--accent-text); font-weight:800;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--inset-hi); font-variant-numeric:tabular-nums}
.mgx-det .step .h {font-size:15px; font-weight:700; color:#fff}
.mgx-det .step .d {font-size:var(--t-xs); color:var(--muted); margin-top:3px; line-height:1.5}
.mgx-det .step .free-pill {margin-top:8px}
.mgx-det /* ============ 3. FAQ ============ */
  .faq {max-width:var(--phone); margin:0 auto}
.mgx-det .qi {border-bottom:1px solid var(--hairline); border-radius:var(--r-sm)}
.mgx-det .qi.open {background:rgba(255,255,255,.018)}
.mgx-det .qh {display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:none; cursor:pointer; font:inherit; color:var(--fg);
    min-height:56px; padding:14px 12px 14px 14px; touch-action:manipulation; transition:background var(--dur-fast)}
.mgx-det .qh:active {background:rgba(255,255,255,.03)}
.mgx-det .qh .q {flex:1; font-size:var(--t-base); line-height:1.35; font-weight:700; letter-spacing:-.01em}
.mgx-det .qh .pm {flex-shrink:0; width:28px; height:28px; border-radius:50%; background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.2);
    display:flex; align-items:center; justify-content:center; color:var(--accent-text); transition:transform var(--dur-base) var(--ease-press), background var(--dur-base)}
.mgx-det .qh .pm .ico {width:14px; height:14px; stroke-width:2.2}
.mgx-det .qi.open .qh .pm {transform:rotate(135deg); background:rgba(var(--accent-rgb),.18)}
.mgx-det .qb {display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-inout)}
.mgx-det .qi.open .qb {grid-template-rows:1fr; transition:grid-template-rows 300ms var(--ease-emph)}
.mgx-det .qb .in {overflow:hidden; min-height:0; font-size:var(--t-sm); line-height:1.6; color:var(--fg-body); max-width:36ch}
.mgx-det .qb .in .pp {margin:0 12px 20px 14px; transform:translateY(-4px); opacity:0; transition:transform var(--dur-base) var(--ease-emph), opacity var(--dur-base) 40ms}
.mgx-det .qi.open .qb .in .pp {transform:none; opacity:1}
.mgx-det .qb .in b {color:var(--fg); font-weight:700}
.mgx-det .faq-more {text-align:center; margin-top:18px; font-size:var(--t-xs); color:var(--muted)}
.mgx-det .faq-more a {display:inline-flex; min-height:44px; align-items:center; gap:4px; padding:0 6px; color:var(--accent-text); font-weight:700}
.mgx-det .faq-more a .ico {width:13px;height:13px}
.mgx-det .wait .trust .ico {width:13px;height:13px}
.mgx-det /* tot cardul e link către CV (trust-building) — apăsarea „respiră", .mgx-det chevron discret */
  .founder {display:flex; align-items:center; gap:14px; background:var(--card-fill); border:1px solid var(--card-bd); border-radius:var(--r-lg); padding:16px 18px; margin:var(--s6) auto 0; box-shadow:var(--sh-2),var(--inset-hi);
    -webkit-tap-highlight-color:transparent; transition:transform var(--dur-fast) var(--ease-press), border-color var(--dur-base), opacity var(--dur-slow) var(--ease-emph)}
.mgx-det .founder:active {transform:scale(.985); border-color:rgba(var(--accent-rgb),.35)}
.mgx-det .founder .go {flex-shrink:0; margin-left:auto; width:17px; height:17px; color:var(--dim)}
.mgx-det .founder .nm {font-size:15px; font-weight:850; color:#fff; line-height:1.25; display:flex; align-items:center; gap:6px}
.mgx-det .founder .nm .vbadge {color:var(--accent-text)}
.mgx-det .founder .nm .vbadge .ico {width:15px;height:15px}
.mgx-det .founder .role {font-size:var(--t-2xs); color:var(--muted); margin-top:4px; line-height:1.4; max-width:34ch}
@media (prefers-reduced-motion:reduce) {
  .mgx-det .qb .in .pp {opacity:1; transform:none}
}
.mgx-det .mk-kick {font:800 8.5px/1 var(--font-display); letter-spacing:.12em}
.mgx-det .mk-d .nm {font:800 13px/1 var(--font-display); color:#fff; margin-top:3px}
.mgx-det .mk-d.off .nm {color:#3a3a45}
.mgx-det .mk-d.sel .nm {color:#cbb8ff}
@media (min-width:1100px) {
  .mgx-det .shead {max-width:64ch}
  .mgx-det .grid3 {grid-template-columns:repeat(3,1fr); gap:16px}
  .mgx-det .steps {grid-template-columns:repeat(4,1fr); column-gap:26px}
  .mgx-det .steps .step:nth-child(n+3) {border-top:none}
  .mgx-det .steps .step {flex-direction:column; gap:12px; padding:6px 0}
  .mgx-det .steps .step+.step {border-left:1px solid var(--hairline); padding-left:26px}
  .mgx-det .founder {max-width:660px}
  .mgx-det #showcase .shead {text-align:left; margin:0; max-width:none}
  .mgx-det #showcase .shead .lede {margin-left:0; max-width:40ch}
  .mgx-det .wait .lede {margin-left:0}
}

/* ==================== specifice magazinului (nu există în LP) ==================== */

/* ancora de valoare: costul pe zi al OFERTEI NOASTRE. Înlocuiește panoul de
   comparație din LP — aceeași funcție psihologică (reîncadrează 200 de lei din
   „cheltuială" în „nimic pe zi"), zero expunere juridică. */
.mgx-val {
  display: grid; gap: 14px; padding: 20px 18px;
  background: var(--card-fill); border: 1px solid var(--card-bd);
  border-radius: var(--r-lg); box-shadow: var(--sh-2), var(--inset-hi);
  text-align: center;
}
.mgx-val .big {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(34px, 11vw, 46px); letter-spacing: -.03em;
  background: linear-gradient(100deg, #2FCBFF, #CF5CFF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mgx-val .big small {
  -webkit-text-fill-color: initial; color: var(--fg);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-left: 6px;
}
.mgx-val .expl { margin: 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.mgx-val .expl b { color: var(--fg); font-weight: 700; }
.mgx-val .row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--hairline);
}
.mgx-val .row span {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--card-bd); background: rgba(255, 255, 255, .03);
  border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--fg-2);
}

/* cine e în spate — variantă compactă a blocului `.founder` din LP */
.mgx-cine {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--card-fill); border: 1px solid var(--card-bd);
  border-radius: var(--r-lg); box-shadow: var(--sh-2), var(--inset-hi);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.mgx-cine:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .4); }
.mgx-cine .nm { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; }
.mgx-cine .role { margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mgx-cine .go { width: 16px; height: 16px; margin-left: auto; flex: 0 0 auto; color: var(--accent-text); }

/* CTA de închidere, după ce toate întrebările au primit răspuns */
.mgx-det-cta { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.mgx-det-cta .cta { min-width: min(340px, 100%); }
.mgx-det-cta .hint { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* Pragul e la 600px, nu la 720: ținta declarată e mobile-first, dar jumătate de
   ecran desktop (~640-760px) e o lățime reală de lucru, iar acolo o singură coloană
   de carduri de 528px lățime înseamnă 6 opriri și un derulat inutil de lung. La
   600px, `.wrap` are 560px → două coloane de ~273px, în care titlurile încap pe
   două rânduri. Sub 600px rămâne o coloană, ca în LP. */
@media (min-width: 600px) {
  .mgx-det .grid3 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mgx-val { padding: 24px; }
  .mgx-val .row { gap: 10px; }
}
@media (min-width: 900px) {
  .mgx-det .wrap { max-width: 660px; }
}
@media (prefers-reduced-motion: reduce) {
  .mgx-det .reveal { opacity: 1; transform: none; transition: none; }
  .mgx-cine:hover { transform: none; }
}