/*
 * public.css — singura foaie de stil a paginilor PUBLICE.
 *
 * Paginile publice (landing, ajutor, întrebări frecvente, noutăți) NU încarcă `portal.css`,
 * `header-styles.css` sau `footer-styles.css`. Acelea sunt shell-ul aplicației autentificate:
 * bară laterală de 260px, `--header-height`, și un set de clase de grilă care suprascriu
 * Bootstrap. Nimic din ele nu se aplică unei pagini de marketing, iar suprascrierile de grilă
 * ar lupta cu layoutul de aici.
 *
 * De aceea TOATE clasele au prefixul `wlp-` (windlinks public): chiar dacă cineva încarcă
 * vreodată ambele foi pe aceeași pagină, nu există nicio coliziune de nume.
 *
 * Tokenii mărcii se repetă mai jos fiindcă `portal.css`, unde sunt definiți canonic, nu se
 * încarcă aici. Valorile trebuie să rămână identice cu cele din `portal.css:49-50` — verdele
 * a fost coborât deliberat pe 23 august 2026 ca să treacă pragul AA de 4,5:1. Orice ton mai
 * deschis decât #12854f pică pragul ca fundal sub text alb.
 */

:root {
    --primary-color: #12854f;
    --secondary-color: #0f7346;
    --primary-hover: #0d6b3f;
    /* Fundal de pagină și tonuri de suprafață. */
    --wlp-fundal: #f5f6fe;
    --wlp-suprafata: #ffffff;
    --wlp-suprafata-2: #f7f9fb;
    --wlp-verde-slab: rgba(18, 133, 79, .07);
    /*
     * Verde pentru TEXT asezat pe `--wlp-verde-slab`.
     *
     * Tenta compusa peste alb da rgb(238,246,243). Pe ea, `--primary-color` (#12854f) scoate
     * **4,25:1** — sub pragul AA de 4,5. Nu se vede cu ochiul liber, dar pica auditul, si pe
     * buna dreptate: eticheta de sectiune e la .74rem, adica 11,8px.
     *
     * #0f7346 da 5,37 pe tenta si 5,90 pe alb. Se foloseste ORIUNDE text verde sta pe tenta:
     * etichete, navigatia activa, linkurile din casetele de nota, cronologia „ce urmeaza".
     * Iconitele pot ramane pe #12854f — ele au prag 3:1, nu 4,5.
     */
    --wlp-verde-pe-tenta: #0f7346;
    /* Text. #5d6778 pe alb dă 5,9:1; #2d3748 pentru titluri dă 11,6:1. */
    --wlp-text: #5d6778;
    --wlp-titlu: #2d3748;
    /*
     * #77808f, valoarea de la prima scriere, dadea 3,99:1 pe alb — sub pragul AA de 4,5.
     * Se folosea la note, unitati de pret si datele din cronologie, adica exact la textele
     * mici. #6b7385 da 4,75:1. Nu-l deschide inapoi.
     */
    --wlp-text-slab: #6b7385;
    --wlp-bordura: #e4e8ef;
    --wlp-raza: 14px;
    --wlp-raza-mica: 9px;
    --wlp-umbra: 0 1px 3px rgba(20, 30, 50, .05), 0 8px 24px rgba(20, 30, 50, .05);
    --wlp-umbra-ridicat: 0 2px 6px rgba(20, 30, 50, .06), 0 18px 40px rgba(18, 133, 79, .10);
    --wlp-gradient: linear-gradient(135deg, #12854f 0%, #0f7346 100%);
    --wlp-lat: 1140px;
    --wlp-tranzitie: all .22s cubic-bezier(.4, 0, .2, 1);
}

/* ─────────────────────────────  reset  ───────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/*
 * Ancorele din /ajutor și /intrebari-frecvente ar ateriza sub bara lipicioasă fără asta.
 * `scroll-padding-top` e pe html, nu `scroll-margin` pe fiecare țintă: o singură regulă
 * acoperă orice element cu id, inclusiv cele adăugate mai târziu.
 */
html { scroll-padding-top: 84px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--wlp-text);
    background: var(--wlp-fundal);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 { color: var(--wlp-titlu); line-height: 1.25; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -.015em; }
h3 { font-size: 1.18rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-color); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .875em;
    background: var(--wlp-verde-slab);
    color: #0d6b3f;
    padding: .12em .38em;
    border-radius: 5px;
}

:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─────────────────────────  structură comună  ───────────────────────── */

.wlp-container {
    width: 100%;
    max-width: var(--wlp-lat);
    margin: 0 auto;
    padding: 0 20px;
}

.wlp-sectiune { padding: clamp(3rem, 1.8rem + 5vw, 5.5rem) 0; }
.wlp-sectiune--stramt { padding: clamp(2rem, 1.4rem + 3vw, 3.5rem) 0; }
.wlp-sectiune--alb { background: var(--wlp-suprafata); }

.wlp-antet-sectiune { max-width: 720px; margin: 0 auto clamp(2rem, 1.4rem + 2vw, 3rem); text-align: center; }
.wlp-antet-sectiune p { font-size: 1.06rem; }

.wlp-eticheta-mica {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wlp-verde-pe-tenta);
    background: var(--wlp-verde-slab);
    padding: .34rem .8rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

/* Sari la conținut — vizibil doar la focus, criteriul WCAG 2.4.1. */
.wlp-sari {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--primary-color);
    color: #fff;
    padding: .7rem 1.2rem;
    border-radius: 0 0 var(--wlp-raza-mica) 0;
    font-weight: 600;
}
.wlp-sari:focus { left: 0; color: #fff; }

/* ─────────────────────────────  butoane  ───────────────────────────── */

.wlp-buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .82rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--wlp-raza-mica);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--wlp-tranzitie);
    background: var(--wlp-gradient);
    color: #fff;
    box-shadow: 0 4px 14px rgba(18, 133, 79, .22);
}
.wlp-buton:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(18, 133, 79, .30); }
.wlp-buton:active { transform: none; }

.wlp-buton--fantoma {
    background: var(--wlp-suprafata);
    color: var(--primary-color);
    border-color: var(--wlp-bordura);
    box-shadow: none;
}
.wlp-buton--fantoma:hover { color: var(--primary-hover); border-color: var(--primary-color); box-shadow: 0 4px 14px rgba(18, 133, 79, .12); }

.wlp-buton--alb { background: #fff; color: var(--primary-color); box-shadow: 0 6px 20px rgba(0, 0, 0, .14); }
.wlp-buton--alb:hover { color: var(--primary-hover); }

.wlp-buton--mic { padding: .55rem 1.05rem; font-size: .92rem; }

/* ──────────────────────────  antet și navigație  ────────────────────── */

.wlp-antet {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--wlp-bordura);
}
.wlp-antet .wlp-container { display: flex; align-items: center; gap: 1.25rem; min-height: 66px; }

.wlp-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.wlp-logo img { display: block; width: 168px; height: auto; }

.wlp-nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.wlp-nav a {
    display: inline-block;
    padding: .5rem .78rem;
    border-radius: var(--wlp-raza-mica);
    color: var(--wlp-titlu);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--wlp-tranzitie);
}
.wlp-nav a:hover { background: var(--wlp-verde-slab); color: var(--wlp-verde-pe-tenta); }
.wlp-nav a.este-activ { color: var(--wlp-verde-pe-tenta); font-weight: 600; background: var(--wlp-verde-slab); }

/* Cele două acțiuni de cont, despărțite clar: „Intră" e un buton discret, „Creează cont" cel plin. */
.wlp-nav-actiuni { display: flex; align-items: center; gap: 1rem; margin-left: .8rem; padding-left: 1.1rem; border-left: 1px solid var(--wlp-bordura); }
.wlp-nav-actiuni .wlp-intra { padding: .5rem .85rem; border: 1px solid var(--wlp-bordura); border-radius: var(--wlp-raza-mica); color: var(--wlp-titlu); font-size: .93rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: var(--wlp-tranzitie); }
.wlp-nav-actiuni .wlp-intra:hover { border-color: var(--primary-color); color: var(--primary-color); }
.wlp-cta-mobil { display: none; }

/*
 * Meniul mobil e `<details>`/`<summary>` nativ: comutare, focus la tastatură, Enter/Space și
 * starea expandată raportată corect cititoarelor de ecran, toate fără o linie de JavaScript.
 * Varianta cu checkbox ascuns + `:checked` dă aceeași funcționalitate cu accesibilitate mai
 * proastă și un `<input>` fără sens semantic în bara de navigație.
 */
.wlp-nav-mobil { display: none; position: relative; margin-left: auto; }
.wlp-nav-mobil > summary {
    list-style: none;
    cursor: pointer;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wlp-bordura);
    border-radius: var(--wlp-raza-mica);
    color: var(--wlp-titlu);
    background: var(--wlp-suprafata);
}
.wlp-nav-mobil > summary::-webkit-details-marker { display: none; }
.wlp-nav-mobil[open] > summary { border-color: var(--primary-color); color: var(--primary-color); }
.wlp-nav-mobil > summary .fa-xmark, .wlp-nav-mobil[open] > summary .fa-bars { display: none; }
.wlp-nav-mobil[open] > summary .fa-xmark { display: inline-block; }
/* Pagina se întunecă în spatele meniului deschis, ca meniul să iasă în față (cerut). Antetul are
   `backdrop-filter`, deci un `fixed` din el se raportează la antet: dimensiunile se dau explicit. */
.wlp-nav-mobil[open]::before { content: ""; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, .45); animation: wlp-umbra .18s ease-out; }
@keyframes wlp-umbra { from { opacity: 0; } to { opacity: 1; } }
.wlp-nav-mobil > summary { position: relative; z-index: 2; }
.wlp-nav-mobil[open] > summary { background: var(--wlp-suprafata); }
/* Panoul: un card pe toată lățimea, rânduri înalte, acțiunea de cont plină la final (ca la uxpeak). */
.wlp-nav-mobil ul {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 74px;
    margin: 0;
    padding: .6rem;
    list-style: none;
    background: var(--wlp-suprafata);
    border: 1px solid var(--wlp-bordura);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20, 30, 50, .18), 0 2px 8px rgba(20, 30, 50, .06);
    max-height: calc(100svh - 90px);
    overflow-y: auto;
    animation: wlp-meniu-intra .18s ease-out;
    z-index: 3;
}
@keyframes wlp-meniu-intra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wlp-nav-mobil ul, .wlp-nav-mobil[open]::before { animation: none; } }
.wlp-nav-mobil a {
    display: block;
    padding: .9rem 1rem;
    border-radius: 12px;
    color: var(--wlp-titlu);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
}
.wlp-nav-sep { height: 1px; margin: .45rem 1rem; background: var(--wlp-bordura); }
.wlp-nav-mobil a.wlp-nav-mobil-cta { display: flex; justify-content: center; margin-top: .45rem; padding: .95rem 1rem; color: #fff; }
.wlp-nav-mobil a.wlp-nav-mobil-cta:hover { color: #fff; background: var(--primary-hover, #0f7346); }
.wlp-nav-mobil a:hover { background: var(--wlp-verde-slab); color: var(--wlp-verde-pe-tenta); }
.wlp-nav-mobil a.este-activ { color: var(--wlp-verde-pe-tenta); font-weight: 600; }

/* ───────────────────────────────  subsol  ──────────────────────────── */

.wlp-subsol { background: #10201a; color: #b6c4bd; padding: 3rem 0 1.6rem; margin-top: auto; }
.wlp-subsol-grila { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; }
.wlp-subsol h2 { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .9rem; }
.wlp-subsol ul { list-style: none; margin: 0; padding: 0; }
.wlp-subsol li { margin-bottom: .5rem; }
.wlp-subsol a { color: #b6c4bd; text-decoration: none; }
.wlp-subsol a:hover { color: #fff; text-decoration: underline; }
.wlp-subsol-logo img { width: 176px; margin-bottom: .9rem; filter: brightness(0) invert(1); opacity: .95; }
.wlp-subsol-jos {
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    justify-content: space-between;
    font-size: .88rem;
}

/* ────────────────────────────  carduri  ───────────────────────────── */

.wlp-grila { display: grid; gap: 1.4rem; }
.wlp-grila--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wlp-grila--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wlp-grila--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wlp-card {
    background: var(--wlp-suprafata);
    border: 1px solid var(--wlp-bordura);
    border-radius: var(--wlp-raza);
    padding: 1.6rem;
    box-shadow: var(--wlp-umbra);
}
.wlp-card h3 { margin-bottom: .5rem; }
.wlp-card p { font-size: .96rem; }

a.wlp-card { display: block; text-decoration: none; color: inherit; transition: var(--wlp-tranzitie); }
a.wlp-card:hover { transform: translateY(-3px); box-shadow: var(--wlp-umbra-ridicat); border-color: rgba(18, 133, 79, .3); }
a.wlp-card .wlp-card-mai { color: var(--primary-color); font-weight: 600; font-size: .92rem; }

.wlp-iconita {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--wlp-verde-slab);
    color: var(--primary-color);
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.wlp-iconita--plina { background: var(--wlp-gradient); color: #fff; }

/* Listă cu bifă verde. */
.wlp-bife { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.wlp-bife li { display: flex; gap: .7rem; align-items: flex-start; }
.wlp-bife i { color: var(--primary-color); margin-top: .28rem; flex: 0 0 auto; }

/*
 * Linkurile din orice bloc cu fundal de tentă verde. Fără regula asta primesc
 * `--primary-color` din regula generală de `a`, iar pe tentă aia dă 4,25:1.
 */
.wlp-nota a,
.wlp-doc-final a,
.wlp-cronologie--viitor .wlp-cron-card a { color: var(--wlp-verde-pe-tenta); }
.wlp-nota a:hover,
.wlp-doc-final a:hover,
.wlp-cronologie--viitor .wlp-cron-card a:hover { color: var(--primary-hover); }

/* Casetă de notă. */.wlp-nota {
    display: flex;
    gap: .85rem;
    background: var(--wlp-verde-slab);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 var(--wlp-raza-mica) var(--wlp-raza-mica) 0;
    padding: 1rem 1.2rem;
    font-size: .95rem;
}
.wlp-nota i { color: var(--primary-color); margin-top: .25rem; flex: 0 0 auto; }

/* ───────────────────────────  responsiv  ──────────────────────────── */

@media (max-width: 900px) {
    .wlp-grila--3, .wlp-grila--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wlp-subsol-grila { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .wlp-nav, .wlp-nav-actiuni { display: none; }
    .wlp-cta-mobil { display: inline-flex; margin-left: auto; padding: .5rem .9rem; font-size: .88rem; white-space: nowrap; }
    .wlp-nav-mobil { display: block; margin-left: .5rem; }
}

@media (max-width: 620px) {
    .wlp-grila--2, .wlp-grila--3, .wlp-grila--4 { grid-template-columns: minmax(0, 1fr); }
    .wlp-subsol-grila { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
    .wlp-logo img { width: 142px; }
    .wlp-container { padding: 0 16px; }
}

/* ═══════════════════════  documentație (/ajutor)  ═══════════════════════ */

.wlp-doc {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    padding-top: clamp(2rem, 1.4rem + 2vw, 3.2rem);
    padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
}

.wlp-cuprins { position: sticky; top: 90px; }
.wlp-cuprins h2 {
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wlp-text-slab);
    margin-bottom: .8rem;
}
.wlp-cuprins ul { list-style: none; margin: 0; padding: 0; }
.wlp-cuprins li { margin-bottom: .18rem; }
.wlp-cuprins a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-radius: var(--wlp-raza-mica);
    color: var(--wlp-titlu);
    font-size: .93rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--wlp-tranzitie);
}
.wlp-cuprins a:hover { background: var(--wlp-verde-slab); color: var(--wlp-verde-pe-tenta); }
.wlp-cuprins i { color: var(--primary-color); width: 1.05rem; text-align: center; flex: 0 0 auto; }

.wlp-doc-sectiune {
    background: var(--wlp-suprafata);
    border: 1px solid var(--wlp-bordura);
    border-radius: var(--wlp-raza);
    box-shadow: var(--wlp-umbra);
    padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
    margin-bottom: 1.4rem;
}
.wlp-doc-sectiune > h2 {
    display: flex;
    align-items: center;
    gap: .85rem;
    font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
    margin-bottom: 1rem;
}
.wlp-doc-sectiune > h2 .wlp-iconita {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin: 0;
    flex: 0 0 auto;
}

/*
 * Numerotare proprie: `list-style` nativ pune cifra în afara cardului la lățimi mici, iar
 * pastila verde e și un reper vizual pentru „ăsta e un pas, nu un paragraf".
 */
.wlp-pasi { list-style: none; counter-reset: pas; margin: 1.3rem 0; padding: 0; }
.wlp-pasi li {
    counter-increment: pas;
    position: relative;
    padding-left: 2.6rem;
    margin-bottom: .95rem;
}
.wlp-pasi li::before {
    content: counter(pas);
    position: absolute;
    left: 0;
    top: .05rem;
    width: 1.85rem;
    height: 1.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wlp-verde-slab);
    color: var(--primary-color);
    font-size: .85rem;
    font-weight: 700;
}

.wlp-doc-sectiune .wlp-nota { margin-top: 1rem; }

.wlp-doc-legaturi { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.3rem; }
.wlp-doc-legaturi a { font-weight: 600; font-size: .94rem; text-decoration: none; }
.wlp-doc-legaturi a:hover { text-decoration: underline; }
.wlp-doc-legaturi i { font-size: .74rem; margin-left: .18rem; }

.wlp-doc-final { background: var(--wlp-verde-slab); border-color: rgba(18, 133, 79, .18); box-shadow: none; }
.wlp-doc-final h2 { font-size: 1.2rem; margin-bottom: .5rem; }

@media (max-width: 900px) {
    .wlp-doc { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
    .wlp-cuprins {
        position: static;
        background: var(--wlp-suprafata);
        border: 1px solid var(--wlp-bordura);
        border-radius: var(--wlp-raza);
        box-shadow: var(--wlp-umbra);
        padding: 1.2rem 1.3rem;
    }
    .wlp-cuprins ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .6rem; }
}

@media (max-width: 620px) {
    .wlp-cuprins ul { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════  acordeon (/intrebari-frecvente)  ══════════════════ */

.wlp-acordeon {
    border: 1px solid var(--wlp-bordura);
    border-radius: var(--wlp-raza-mica);
    margin-bottom: .6rem;
    background: var(--wlp-suprafata);
    transition: var(--wlp-tranzitie);
}
.wlp-acordeon:hover { border-color: rgba(18, 133, 79, .32); }
.wlp-acordeon[open] { border-color: rgba(18, 133, 79, .32); box-shadow: 0 4px 16px rgba(18, 133, 79, .07); }

.wlp-acordeon > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.15rem;
    font-weight: 600;
    color: var(--wlp-titlu);
    border-radius: var(--wlp-raza-mica);
}
.wlp-acordeon > summary::-webkit-details-marker { display: none; }
.wlp-acordeon > summary:hover { color: var(--primary-color); }
.wlp-acordeon > summary i {
    color: var(--primary-color);
    font-size: .82rem;
    flex: 0 0 auto;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.wlp-acordeon[open] > summary { color: var(--primary-color); }
.wlp-acordeon[open] > summary i { transform: rotate(180deg); }

.wlp-acordeon-corp {
    padding: 0 1.15rem 1.15rem;
    font-size: .96rem;
    border-top: 1px solid var(--wlp-bordura);
    padding-top: 1rem;
    margin-top: -1px;
}

/* Ținta unei ancore primește un accent scurt, ca omul să vadă unde a aterizat. */
.wlp-acordeon:target { border-color: var(--primary-color); }

/* ══════════════════════  cronologie (/noutati)  ══════════════════════ */

.wlp-filtre { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.wlp-filtru {
    display: inline-block;
    padding: .42rem .95rem;
    border: 1px solid var(--wlp-bordura);
    border-radius: 999px;
    background: var(--wlp-suprafata);
    color: var(--wlp-text);
    font-size: .89rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--wlp-tranzitie);
}
.wlp-filtru:hover { border-color: var(--primary-color); color: var(--primary-color); }
.wlp-filtru.este-activ { background: var(--wlp-gradient); border-color: transparent; color: #fff; }
.wlp-filtru.este-activ:hover { color: #fff; }

.wlp-cronologie-container { max-width: 820px; }
.wlp-cronologie-titlu {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wlp-text-slab);
    margin: 0 0 1.4rem;
}
.wlp-cronologie-titlu i { color: var(--primary-color); font-size: .95rem; }
.wlp-cronologie + .wlp-cronologie-titlu { margin-top: 3rem; }

/*
 * O singură șină verticală, marcatorii pe stânga. Fără zig-zag alternat: se prăbușește pe
 * mobil și oricum e mai greu de citit decât o coloană dreaptă.
 */
.wlp-cronologie { list-style: none; margin: 0; padding: 0 0 0 2.6rem; position: relative; }
.wlp-cronologie::before {
    content: "";
    position: absolute;
    left: 15px;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: var(--wlp-bordura);
}
/* Ce urmează: linie punctată, ca să se vadă din prima că nu e livrat. */
.wlp-cronologie--viitor::before {
    background: repeating-linear-gradient(to bottom,
        rgba(18, 133, 79, .45) 0 5px, transparent 5px 11px);
}

.wlp-cron-item { position: relative; margin-bottom: 1.1rem; }

.wlp-cron-punct {
    position: absolute;
    left: -2.6rem;
    top: 1.1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wlp-suprafata);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-size: .76rem;
}
.wlp-cron-punct--plin { background: var(--wlp-gradient); border-color: transparent; color: #fff; }

.wlp-cron-card {
    background: var(--wlp-suprafata);
    border: 1px solid var(--wlp-bordura);
    border-radius: var(--wlp-raza);
    box-shadow: var(--wlp-umbra);
    padding: 1.3rem 1.4rem;
}
.wlp-cronologie--viitor .wlp-cron-card { background: var(--wlp-verde-slab); border-color: rgba(18, 133, 79, .18); box-shadow: none; }
.wlp-cron-card h3 { margin: .35rem 0 .55rem; font-size: 1.1rem; }
.wlp-cron-card p { font-size: .96rem; }

.wlp-cron-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .84rem; color: var(--wlp-text-slab); }
.wlp-cron-eticheta { color: var(--primary-color); font-weight: 600; }
.wlp-cronologie--viitor .wlp-cron-eticheta { color: var(--wlp-verde-pe-tenta); }
.wlp-cron-meta time { font-variant-numeric: tabular-nums; }

.wlp-stare { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.wlp-stare--lucru { background: var(--wlp-gradient); color: #fff; }
.wlp-stare--plan { background: #fff; color: var(--primary-color); border: 1px solid rgba(18, 133, 79, .35); }

.wlp-cron-luna { margin: 2rem 0 1rem; }
.wlp-cron-luna:first-child { margin-top: 0; }
.wlp-cron-luna span {
    display: inline-block;
    background: var(--wlp-fundal);
    padding: .1rem .7rem .1rem 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wlp-titlu);
}

.wlp-gol { text-align: center; color: var(--wlp-text-slab); }

@media (max-width: 620px) {
    .wlp-cronologie { padding-left: 2.1rem; }
    .wlp-cronologie::before { left: 11px; }
    .wlp-cron-punct { left: -2.1rem; width: 26px; height: 26px; font-size: .66rem; top: 1rem; }
    .wlp-cron-card { padding: 1.1rem 1.15rem; }
}

/* ═══════════════════════  pagina principală  ═══════════════════════ */

.wlp-erou {
    position: relative;
    text-align: center;
    padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0 clamp(3rem, 1.8rem + 5vw, 5.5rem);
    background:
        radial-gradient(900px 420px at 50% -8%, rgba(18, 133, 79, .13), transparent 70%),
        var(--wlp-suprafata);
    border-bottom: 1px solid var(--wlp-bordura);
}
/*
 * Titlul are deja `<br>` intre cele doua propozitii, deci max-width serveste doar ca sa nu
 * se intinda pe toata latimea ecranului. 15ch (~370px la marimea aia) rupea „singur." pe un
 * al treilea rand — propozitia are 27 de caractere. 760px o tine intreaga pana la 1200px si
 * o lasa sa curga natural sub atat.
 */
.wlp-erou h1 { max-width: 760px; margin-left: auto; margin-right: auto; }
.wlp-erou-sub {
    max-width: 64ch;
    margin: 0 auto 2rem;
    font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem);
}
.wlp-erou-actiuni { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.wlp-erou-nota {
    margin-top: 1.5rem;
    font-size: .9rem;
    color: var(--wlp-text-slab);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.wlp-erou-nota i { color: var(--primary-color); }

.wlp-card-raspuns { margin-top: .8rem; font-size: .93rem; }
.wlp-card-raspuns strong { color: var(--primary-color); }

/* Fluxul în patru pași. */
.wlp-flux {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4rem;
    counter-reset: flux;
}
.wlp-flux li { position: relative; padding-top: .5rem; }
/*
 * Linia care leagă pașii. `::after` pe fiecare element în afară de ultimul, nu un fundal pe
 * container: cu grilă, o linie de fundal ar trece și pe sub numere la reașezarea pe mobil.
 */
.wlp-flux li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(2.5rem + .6rem);
    top: 1.7rem;
    right: -1.4rem;
    height: 2px;
    background: var(--wlp-bordura);
}
.wlp-flux-nr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--wlp-gradient);
    color: #fff;
    font-weight: 700;
    margin-bottom: .9rem;
    position: relative;
    z-index: 1;
}
.wlp-flux h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.wlp-flux p { font-size: .94rem; }
.wlp-flux-nota {
    margin-top: 2.2rem;
    text-align: center;
    font-size: .93rem;
    color: var(--wlp-text-slab);
}
.wlp-flux-nota i { color: var(--primary-color); margin-right: .35rem; }

/* Blocul pentru magazine online. */
.wlp-magazin {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 2.6rem;
    align-items: center;
    background: var(--wlp-suprafata);
    border: 1px solid var(--wlp-bordura);
    border-radius: var(--wlp-raza);
    box-shadow: var(--wlp-umbra);
    padding: clamp(1.6rem, 1.1rem + 2vw, 2.8rem);
}
.wlp-magazin .wlp-nota { margin-top: 1.2rem; }

.wlp-grila--dens { gap: 1.4rem 3rem; }

/* Pachetele de preț. */
.wlp-preturi { align-items: stretch; }
.wlp-pachet {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--wlp-suprafata);
    border: 1px solid var(--wlp-bordura);
    border-radius: var(--wlp-raza);
    box-shadow: var(--wlp-umbra);
    padding: 1.8rem 1.6rem;
}
.wlp-pachet.este-evidentiat {
    border-color: var(--primary-color);
    box-shadow: var(--wlp-umbra-ridicat);
}
.wlp-pachet-panglica {
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wlp-gradient);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .26rem .8rem;
    border-radius: 999px;
    white-space: nowrap;
}
.wlp-pachet h3 { margin-bottom: .35rem; }
.wlp-pachet-desc { font-size: .93rem; color: var(--wlp-text-slab); }
.wlp-pachet-pret {
    margin: 1.1rem 0 1.3rem;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid var(--wlp-bordura);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
}
.wlp-pachet-dela { font-size: .88rem; color: var(--wlp-text-slab); }
.wlp-pachet-pret strong { font-size: 2.3rem; line-height: 1; color: var(--wlp-titlu); letter-spacing: -.02em; }
.wlp-pachet-unit { font-size: .92rem; color: var(--wlp-text-slab); }
.wlp-pachet .wlp-bife { font-size: .93rem; margin-bottom: 1.6rem; }
.wlp-pachet .wlp-buton { margin-top: auto; width: 100%; }

.wlp-nota--centrat { max-width: 720px; margin: 2.2rem auto 0; }

.wlp-faq-scurt { max-width: 800px; }
.wlp-faq-toate { margin-top: 1.4rem; text-align: center; }
.wlp-faq-toate a { font-weight: 600; text-decoration: none; }
.wlp-faq-toate a:hover { text-decoration: underline; }
.wlp-faq-toate i { font-size: .78rem; margin-left: .25rem; }

/* Banda finală. */
.wlp-cta {
    background: var(--wlp-gradient);
    color: #fff;
    text-align: center;
    padding: clamp(3rem, 2rem + 4vw, 4.5rem) 0;
}
.wlp-cta h2 { color: #fff; }
.wlp-cta p { color: rgba(255, 255, 255, .9); margin-bottom: 1.8rem; font-size: 1.05rem; }

@media (max-width: 980px) {
    .wlp-flux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wlp-flux li:nth-child(2n)::after { display: none; }
    .wlp-magazin { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}

@media (max-width: 620px) {
    .wlp-flux { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    .wlp-flux li::after { display: none !important; }
    .wlp-erou-actiuni .wlp-buton { width: 100%; }
}

/* ── Planurile (continut/sectiune_preturi.php) ──
   Patru coloane strânse: `padding` mai mic decât la pachetele vechi de trei, iar numele planului
   e `h2` pe /preturi și `h3` pe prima pagină, deci stilul merge pe clasă, nu pe etichetă. */
.wlp-preturi .wlp-pachet { padding: 1.6rem 1.25rem 1.3rem; }
.wlp-pachet-nume { font-size: 1.25rem; margin: 0 0 .35rem; color: var(--wlp-titlu); }
.wlp-preturi .wlp-pachet-pret { margin: .9rem 0 .25rem; padding-bottom: 0; border-bottom: 0; }
.wlp-pachet-anual-nota { font-size: .82rem; color: var(--wlp-text-slab); margin: 0 0 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--wlp-bordura); }
.wlp-preturi .wlp-bife { flex: 1 1 auto; }
.wlp-pret-anual { display: none; }
.wlp-anual .wlp-pret-anual { display: inline; }
.wlp-anual p.wlp-pret-anual { display: block; }
.wlp-anual .wlp-pret-lunar { display: none; }

.wlp-perioada { display: flex; width: max-content; margin: 0 auto 2rem; gap: 4px; padding: 4px; border-radius: 999px; background: var(--wlp-verde-slab, #eef6f3); }
.wlp-per { border: 0; background: transparent; padding: .5rem 1.15rem; border-radius: 999px; font: inherit; font-size: .92rem; font-weight: 700; color: var(--wlp-text, #374151); cursor: pointer; }
.wlp-per span { font-size: .74rem; color: var(--wlp-verde-pe-tenta, #0f7346); margin-left: .3rem; }
.wlp-per.este-activ { background: #fff; color: var(--wlp-verde-pe-tenta, #0f7346); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wlp-per:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }

.wlp-preturi-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0 0; }
.wlp-preturi-extra > div { background: var(--wlp-suprafata); border: 1px solid var(--wlp-bordura); border-radius: var(--wlp-raza); padding: 1rem 1.2rem; font-size: .93rem; color: var(--wlp-text-slab); line-height: 1.55; }
.wlp-preturi-extra strong { color: var(--wlp-titlu); }
@media (max-width: 760px) { .wlp-preturi-extra { grid-template-columns: minmax(0, 1fr); } }

/* Previzualizarea ghidului animat în Ajutor (wl_ghid.php): se deschide mare la apăsare. */
.wlp-ghid-poster { margin: 1.2rem 0 1.4rem; }
.wlp-ghid-poster .wlg-poster { margin: 0; }

/* ── Planurile, refăcute: capul (comutator, garanții, dovadă), cardul cu rezultatul și butonul sus ── */
.wlp-pret-cap { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin: 0 0 2.4rem; text-align: center; }
.wlp-pret-cap .wlp-perioada { margin: 0; }
.wlp-pret-garantii { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--wlp-text); }
.wlp-pret-garantii i { color: var(--primary-color); margin-right: .35rem; font-size: .8rem; }
.wlp-pret-dovada { margin: 0; font-size: .9rem; color: var(--wlp-text-slab); }
.wlp-pret-dovada strong { color: var(--wlp-titlu); }
.wlp-preturi { gap: 1.1rem; align-items: stretch; }
.wlp-pachet-cap { display: flex; align-items: center; gap: .7rem; }
.wlp-pachet-cap .wlp-iconita { width: 38px; height: 38px; margin: 0; border-radius: 10px; font-size: 1rem; }
.wlp-pachet-cap .wlp-pachet-nume { margin: 0; }
.wlp-preturi .wlp-pachet-desc { margin: .55rem 0 0; min-height: 2.9em; font-size: .9rem; }
.wlp-preturi .wlp-pachet-pret { align-items: flex-end; gap: .45rem; margin: 1rem 0 .2rem; }
.wlp-preturi .wlp-pachet-pret strong { font-size: 2.6rem; font-variant-numeric: tabular-nums; }
.wlp-preturi .wlp-pachet-unit { font-size: .8rem; line-height: 1.25; padding-bottom: .25rem; }
.wlp-preturi .wlp-pachet-anual-nota { min-height: 2.6em; margin: 0 0 .9rem; padding: 0; border: 0; }
.wlp-pachet-anual-nota b { color: var(--wlp-verde-pe-tenta); font-weight: 700; }
/* Rezultatul pe lună, nu unitatea: ce primești, într-o cutie a ei. */
.wlp-pachet-rezultat { margin: 0 0 1rem; padding: .7rem .8rem; border-radius: 12px; background: var(--wlp-verde-slab); color: var(--wlp-titlu); font-size: .9rem; line-height: 1.45; }
.wlp-pachet-rezultat strong { color: var(--wlp-verde-pe-tenta); }
.wlp-pachet-rezultat small { display: block; margin-top: .15rem; color: var(--wlp-text-slab); font-size: .8rem; }
/* Butonul lângă preț, nu sub listă: decizia se ia la cifră. */
.wlp-preturi .wlp-pachet .wlp-buton { margin: 0 0 1.2rem; }
.wlp-bife-cap { margin: 0 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--wlp-bordura); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wlp-text-slab); }
.wlp-preturi .wlp-bife { gap: .6rem; font-size: .9rem; margin: 0; align-content: start; }
/* Planul recomandat: ridicat și puțin mai mare, cu fundal propriu. */
.wlp-pachet.este-evidentiat { background: linear-gradient(180deg, #f3faf6 0%, var(--wlp-suprafata) 38%); border: 2px solid var(--primary-color); box-shadow: 0 20px 50px rgba(18, 133, 79, .16), var(--wlp-umbra-ridicat); }
@media (min-width: 1101px) {
    .wlp-pachet.este-evidentiat { transform: translateY(-10px) scale(1.03); z-index: 1; }
}
@media (max-width: 620px) {
    /* Pe telefon, în ordinea prețurilor (cerut): recomandatul nu mai sare primul, se vede după panglică. */
    .wlp-preturi .wlp-pachet-desc, .wlp-preturi .wlp-pachet-anual-nota { min-height: 0; }
}

/* Gratuit: bandă separată sub cele trei planuri plătite (intrarea fără angajament). */
.wlp-gratuit { display: flex; align-items: center; gap: 1rem 1.4rem; margin: 1.6rem 0 0; padding: 1.1rem 1.4rem; border: 1px dashed #b9c4d0; border-radius: var(--wlp-raza); background: var(--wlp-suprafata-2, #f7f9fb); }
.wlp-gratuit .wlp-iconita { flex: 0 0 auto; width: 42px; height: 42px; margin: 0; }
.wlp-gratuit-text { flex: 1 1 auto; min-width: 0; }
.wlp-gratuit-text p { margin: 0; font-size: .92rem; color: var(--wlp-text); line-height: 1.5; }
.wlp-gratuit-text .wlp-gratuit-titlu { margin-bottom: .15rem; font-size: 1.05rem; font-weight: 700; color: var(--wlp-titlu); }
.wlp-gratuit-titlu span { margin-left: .4rem; font-size: .88rem; font-weight: 600; color: var(--wlp-verde-pe-tenta); }
.wlp-gratuit .wlp-buton { flex: 0 0 auto; }
@media (max-width: 760px) {
    .wlp-gratuit { flex-direction: column; align-items: flex-start; }
    .wlp-gratuit .wlp-buton { width: 100%; justify-content: center; }
}