/* ====== PORTAT 1:1 din LP (nutritie-desktop) — sectiunea Program ====== */
.plan-switch{display:flex; justify-content:center; align-items:center; gap:7px}
  .plan-switch .plan-trigger-cnt{position:relative; flex:1; max-width:106px}
  .plan-switch .plan-trigger-cnt::before{content:""; position:absolute; inset:-2px; background:var(--grad); z-index:-1;
    filter:blur(9px); opacity:0; transform:scale(.4); transition:opacity 750ms var(--ease-out), transform 750ms var(--ease-out);
    border-radius:48px; will-change:transform}
  .plan-switch .plan-trigger-cnt:has(.plan-trigger[data-active])::before{transform:none; opacity:.5}
  .plan-switch .plan-trigger{display:block; width:100%; padding:0; margin:0; font:inherit; cursor:pointer; touch-action:manipulation;
    transition:500ms; border-radius:48px; border:1px solid transparent; transform:scale(.9); opacity:.75; overflow:hidden;
    background:transparent; -webkit-tap-highlight-color:transparent}
  .plan-switch .plan-trigger *{transition:750ms}
  .plan-switch .plan-trigger[data-active]{transform:scale(1.05); opacity:1}
  .plan-switch .plan-trigger svg{width:100%; display:block; position:relative}
  .plan-switch .plan-trigger svg .text{transform:scale(1.05) translate(-0.3rem,-0.2rem)}
  /* 1 — Slăbit Rapid (albastru) */
  .plan-switch .plan-trigger[data-id="1"]{background:#b6dafd}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]){background:#1b1f42; border-color:#0077f4}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]) svg .text *{fill:#557fbf; stroke:#557fbf}
  .plan-switch .plan-trigger[data-id="1"] .ruler-1,.plan-switch .plan-trigger[data-id="1"] .ruler-2{will-change:transform,opacity}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]) .ruler-1{transform:translateY(-100%); opacity:0}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]) .ruler-2{transform:translateY(100%); opacity:0}
  /* 2 — Menținere Echilibrată (mov) */
  .plan-switch .plan-trigger[data-id="2"]{background:#d4abf9}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]){background:#3c2e46; border-color:#994fe1}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]) svg .text *{fill:#795b87}
  .plan-switch .plan-trigger[data-id="2"] svg .branch-1{will-change:transform,opacity; transform-origin:bottom left}
  .plan-switch .plan-trigger[data-id="2"] svg .branch-2{will-change:transform,opacity; transform-origin:top}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]) svg .branch-1{transform:translate(100%,200%) rotate(-60deg); opacity:0}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]) svg .branch-2{transform:translateX(-20px) rotate(-45deg); opacity:0}
  /* 3 — Masă Musculară (roșu) */
  .plan-switch .plan-trigger[data-id="3"]{background:#fe898e}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]){background:#492729; border-color:#cc001b}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]) svg .text *{fill:#985256; stroke:#985256}
  .plan-switch .plan-trigger[data-id="3"] svg .chain-big,.plan-switch .plan-trigger[data-id="3"] svg .chain-small{will-change:transform,opacity; transform-origin:center}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]) svg .chain-big{opacity:0; transform:rotate(90deg) scale(1.5)}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]) svg .chain-small{opacity:0; transform:rotate(-90deg) scale(1.5)}

.goal-hint{display:flex; align-items:center; justify-content:center; font-size:var(--t-sm); font-weight:700; color:var(--accent-text); margin:0 auto 16px}

.plan-cards{position:relative; margin-top:8px}
  .pcard{display:none; position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--card-solid); border:1px solid var(--card-bd); box-shadow:var(--sh-2),var(--inset-hi)}
  /* tranziție direcțională: cardul iese spre partea opusă și cel nou intră din direcția
     obiectivului ales (stânga/dreapta), cu un mic drift vertical — fluid, nu abrupt */
  .pcard.on{display:block; animation:cardInR .44s var(--ease-emph) both}
  .pcard.on.from-l{animation-name:cardInL}
  .pcard.out{animation:cardOutL .18s var(--ease-out) both}
  .pcard.out.to-r{animation-name:cardOutR}
  @keyframes cardInR{from{opacity:0; transform:translateX(30px) translateY(4px) scale(.985)} to{opacity:1; transform:none}}
  @keyframes cardInL{from{opacity:0; transform:translateX(-30px) translateY(4px) scale(.985)} to{opacity:1; transform:none}}
  @keyframes cardOutL{to{opacity:0; transform:translateX(-24px) scale(.99)}}
  @keyframes cardOutR{to{opacity:0; transform:translateX(24px) scale(.99)}}
  .pcard.slabit{--pc:0,144,255} .pcard.masa{--pc:255,81,56} .pcard.mentinere{--pc:151,92,240}
  .pcard.reco{border-color:rgba(var(--pc),.45); box-shadow:0 0 0 1px rgba(var(--pc),.26),0 0 38px -12px rgba(var(--pc),.5),var(--sh-3)}
  /* coperțile WIDE (landscape, ca în aplicația reală) — decupăm colțurile „coapte" în artwork
     printr-un container cu rază proprie (12px — mai mică decât a cardului: regula razelor imbricate) */
  .pcard .media{position:relative; padding:12px 12px 0;
    background:radial-gradient(130% 100% at 50% 0%, rgba(var(--pc),.14), transparent 74%)}
  /* pe telefon coperta e decupată ușor pe verticală (focus pe centru) ca toată
     secțiunea să încapă pe un ecran; pe ecrane late revine la proporția plină */
  .pcard .media .cov{border-radius:14px; overflow:hidden; aspect-ratio:880/560;
    box-shadow:0 18px 40px -14px rgba(0,0,0,.55), 0 3px 12px rgba(0,0,0,.3)}
  .pcard .media .cov img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.075)}
  .pcard.on .media .cov img{animation:covZoom .55s var(--ease-emph) backwards}
  @keyframes covZoom{from{transform:scale(1.14)} to{transform:scale(1.075)}}
  .pcard .rib{position:absolute; top:24px; left:24px; z-index:3; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
    color:#fff; background:var(--grad); border-radius:999px; padding:5px 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 14px rgba(124,92,252,.35)}
  .pcard .body{padding:12px 18px 11px}
  .pcard .pdesc{font-size:var(--t-sm); line-height:1.5; color:var(--muted); max-width:34ch}
  /* Adăugat la integrare (măsurat față de replică, nu presupus): în replică `.pdesc`
     e un `<p>` cu marginea IMPLICITĂ de browser (`margin-block: 1em`) — regula de mai
     sus nu declară margini, deci designul o are. Stiva noastră include
     `framework.bundle.css`, care resetează `p { margin: 0 }`, iar cardul ieșea cu
     20px mai scund decât în design. O restaurez explicit. */
  .pcard .pdesc{margin-block:1em}
  .pcard ul{list-style:none; padding:0; margin:9px 0 0}
  .pcard li{display:flex; gap:11px; align-items:flex-start; font-size:var(--t-sm); line-height:1.5; color:var(--fg-2); padding:3px 0}
  .ckdisc{flex-shrink:0; width:20px; height:20px; border-radius:50%; background:rgba(var(--ok-rgb),.14); display:flex; align-items:center; justify-content:center; margin-top:1px}
  .ckdisc .ico{width:12px; height:12px; stroke:var(--ok); stroke-width:2.4}
  .pcard .priceline{display:flex; align-items:baseline; gap:8px; margin-top:9px; padding-top:9px; border-top:1px solid var(--hairline)}
  .pcard .priceline .big{font-size:30px; font-weight:850; letter-spacing:-.03em; color:#fff} .pcard .priceline .per{font-size:var(--t-xs); color:var(--muted)}
  .pcard .priceline .freecancel{margin-left:auto; align-self:center; font-size:var(--t-2xs); color:var(--ok-text); display:inline-flex; align-items:center; gap:5px}
  .pcard .body .cta{margin-top:10px; width:100%; font-weight:800}
  /* linkul către secțiunea de detalii — trăiește ÎN card, sub CTA (un singur CTA primar pe ecran) */
  .detwrap{text-align:center; margin-top:2px}
  .detlink{display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:9px 6px; font-size:var(--t-xs); color:var(--accent-text);
    border-bottom:1px solid rgba(var(--accent-rgb),.4); cursor:pointer; touch-action:manipulation; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; transition:transform var(--dur-fast) var(--ease-press)}
  .detlink .ico{width:14px; height:14px; transition:transform var(--dur-base) var(--ease-out)}
  .detlink:active{transform:scale(.97)} .detlink:active .ico{transform:translateX(3px)}

.shead{text-align:center; max-width:36ch; margin:0 auto 32px}
  .shead h2{font-size:var(--t-h2); line-height:var(--lh-snug); margin:8px 0 0}
  .shead p{margin-top:10px}

@media (min-width:760px){
    .pcard.on{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); align-items:stretch}
    .pcard .media{padding:14px 0 14px 14px; display:flex; align-items:center}
    .pcard .media .cov{width:100%; aspect-ratio:880/660}
    .pcard .body{display:flex; flex-direction:column; justify-content:center; padding:18px 22px}
    .pcard .pdesc{max-width:none}
  }

@media (min-width:1100px){
  .plan-switch{gap:12px}
  .plan-switch .plan-trigger-cnt{max-width:136px}
  .plan-cards{margin-top:14px}
  .pcard .media{padding:18px 0 18px 18px}
  .pcard .body{padding:24px 30px}
  .pcard .media .cov img{transition:transform 1.1s var(--ease-out)}
  .pcard:hover .media .cov img{transform:scale(1.12)}
}
.buybar{position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(130%); opacity:0;
    transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
    background:rgba(13,17,23,.82); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
    border-top:1px solid var(--hairline); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 -8px 24px rgba(0,0,0,.4);
    padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .buybar .inner{display:flex; align-items:center; gap:12px; max-width:640px; margin:0 auto}
  .buybar.show{transform:translateY(0); opacity:1}
  .buybar .px{font-size:var(--t-sm); font-weight:800; color:#fff; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.4)} .buybar .px small{color:var(--muted); font-weight:600}
  .buybar .cta{flex:1; min-height:48px; padding:0 14px; font-size:15px; font-weight:800}