/* ======================================================================
   22.10.2026, Adrian: paginile „Desenul meu prinde viață” (.hp.dv, și „Desenul înrămat”), „Din partea tuturor” (.hp.dt) și „Cadoul se
   descoperă” (.hp.ds), în limbajul primei pagini noi, ca „Cântecul tău”, „Cartea de Crăciun” și „Mesajul video de la Moș Crăciun”
   (assets/cantec.css, finalul assets/carte-atelier.css, assets/mos.css). Numele (dacă îl știm, assets/cadou-finisare.js) scris de mână,
   auriu, sub titlu; fiecare format cu prețul lui și prețul tăiat; garanția lângă buton; configuratorul urcă peste primul ecran, iar
   prima secțiune de după el peste configurator, pe o margine de troian (masca de sus a secțiunii); după configurator, totul pe aceeași
   hârtie crem, fără fundaluri de altă culoare; cardurile pe hârtia biletului (firul hârtiei, fulgul în colț, chenarul fin); semnătura
   „Desenat de …” scrisă de mână, zmeuriu. Configuratorul rămâne imediat după prima secțiune, iar formularul nu se schimbă.
   Se încarcă după stilul paginii (inc/produs-desen.php, inc/produs-tuturor.php, inc/produs-descopera.php).
   ====================================================================== */
@font-face{font-family:"hooo Scris";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hooo-scris-600-ro.woff2) format("woff2"),url(fonts/hooo-scris-600.ttf) format("truetype")}
/* 22.10.2026: aceleași unelte și pe „Azi vorbim despre tine” (.hp.pd) și „Vocea de acasă” (.hp.vc), secțiunea 9 */
.hp:is(.dv,.dt,.ds,.pd,.vc){--hp-hartie:#FBF6EF;--hp-aur-scris:#EFC654;--hp-zmeura-scris:#A81F3B;
  --hp-troian:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V24c60-8 120-20 200-16 90 5 130 26 230 24 110-2 150-28 260-28 100 0 140 22 240 24 95 2 140-20 230-22 80-2 140 14 280 20v46z'/%3E%3C/svg%3E");
  --hp-bilet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -60 120 120'%3E%3Cdefs%3E%3Cpath id='b' d='M0-9V-52M0-39l-10-10M0-39l10-10M0-25l-8-8M0-25l8-8'/%3E%3Cg id='f' fill='none' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cuse href='%23b'/%3E%3Cuse href='%23b' transform='rotate(60)'/%3E%3Cuse href='%23b' transform='rotate(120)'/%3E%3Cuse href='%23b' transform='rotate(180)'/%3E%3Cuse href='%23b' transform='rotate(240)'/%3E%3Cuse href='%23b' transform='rotate(300)'/%3E%3Ccircle r='6'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23f' stroke='%23fff' transform='translate(-1.3 -1.3)'/%3E%3Cuse href='%23f' stroke='%238c6a44' stroke-opacity='.22' transform='translate(1.3 1.3)'/%3E%3Cuse href='%23f' stroke='%23f7efe1'/%3E%3C/svg%3E") right -30px bottom -28px/130px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .3 -.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px,
    radial-gradient(140% 90% at 12% 0%,#fffefa 0%,#fcf7ee 50%,#f6ecdc 100%);
  --hp-bilet-umbra:0 1px 0 #ede1cd,0 2px 0 #e0cfb5,0 16px 34px -26px rgba(24,10,3,.45)}

/* ---------- 1. primul ecran: numele, prețurile, garanția ---------- */
.hp:is(.dv,.dt,.ds) .pc-hero{padding-bottom:clamp(100px,8.5vw,128px)}
.hp:is(.dv,.dt,.ds) .pc-hero h1:has(+.hp-pentru:not([hidden])){margin-bottom:6px}
.hp-pentru{margin:0 0 18px;font:600 clamp(32px,3.4vw,46px)/1.1 "hooo Scris","Segoe Script",cursive;color:var(--hp-aur-scris);rotate:-2deg;transform-origin:0 50%;text-shadow:0 2px 14px rgba(10,4,6,.55)}
.hp-pentru b{font-weight:600}
.hp-oferte{display:flex;flex-wrap:wrap;gap:12px 18px;margin:0 0 24px;padding:0;list-style:none}
.hp-oferta{display:flex;align-items:baseline;gap:7px;min-width:0;white-space:nowrap}
.hp-oferta+.hp-oferta{padding-left:18px;border-left:1px solid rgba(255,243,227,.2)}
.hp-oferta span{font-size:13px;color:var(--pc-crem-2,#E6DCCD)}
.hp-oferta b{font:760 24px/1.15 var(--font-display);letter-spacing:-.02em;color:var(--pc-crem,#FFF3E3)}
.hp-oferta s{font-size:13.5px;color:var(--pc-crem-3,#B7AD9E);text-decoration-thickness:1.5px}
.hp:is(.dv,.dt,.ds) .pc-cta{row-gap:14px}
.hp-garantie{display:flex;flex-basis:100%;align-items:center;gap:7px;margin:0;font-size:14px;font-weight:600;color:var(--pc-crem,#FFF3E3)}
.hp-garantie__ic{flex:none;width:18px;height:18px;color:var(--hp-aur-scris)}
.hp:is(.dv,.dt,.ds) .pt-garantii-sus,.hp:is(.dv,.dt,.ds) .dt-garantii-sus{margin-top:16px}

/* ---------- 2. trecerile: configuratorul urcă peste primul ecran, prima secțiune de după el peste configurator ---------- */
.hp:is(.dv,.dt,.ds) .cs-atelier,.hp:is(.dv,.dt,.ds) .cs-atelier+section,.hp:is(.dv,.dt,.ds) .cs-scena+section{position:relative;z-index:1;margin-top:-46px;
  -webkit-mask:var(--hp-troian) 0 0/100% 48px no-repeat,linear-gradient(#000,#000) 0 46px/100% calc(100% - 46px) no-repeat;
  mask:var(--hp-troian) 0 0/100% 48px no-repeat,linear-gradient(#000,#000) 0 46px/100% calc(100% - 46px) no-repeat}
.hp:is(.dv,.dt,.ds) .cs-atelier{padding-top:104px;padding-bottom:110px}
.hp:is(.dv,.dt,.ds) .cs-atelier+section,.hp:is(.dv,.dt,.ds) .cs-scena+section{z-index:2}

/* ---------- 3. după configurator, o singură hârtie ---------- */
.hp:is(.dv,.dt,.ds) .cs-atelier~section,.hp:is(.dv,.dt,.ds) .cs-scena~section{padding:clamp(48px,5.4vw,72px) 0;background:var(--hp-hartie);color:var(--pc-ink,#1E1A20)}
.hp:is(.dv,.dt,.ds) .cs-atelier+section,.hp:is(.dv,.dt,.ds) .cs-scena+section{padding-top:calc(46px + clamp(52px,5.4vw,72px))}
.hp:is(.dv,.dt,.ds) .cs-atelier~section .pc-cap,.hp:is(.dv,.dt,.ds) .cs-scena~section .pc-cap{margin-bottom:34px}
.hp:is(.dv,.dt,.ds) .cs-atelier~section h2,.hp:is(.dv,.dt,.ds) .cs-scena~section h2{color:var(--pc-ink,#1E1A20)}
.hp:is(.dv,.dt,.ds) .cs-atelier~section h2 em,.hp:is(.dv,.dt,.ds) .cs-scena~section h2 em{color:var(--pc-zmeura,#C92A48)}
.hp:is(.dv,.dt,.ds) .cs-atelier~section .pc-eticheta,.hp:is(.dv,.dt,.ds) .cs-scena~section .pc-eticheta{color:var(--fam-text,var(--pc-zmeura,#C92A48))}
.hp:is(.dv,.dt,.ds) .cs-atelier~section .pc-cap>p:not(.pc-eticheta),.hp:is(.dv,.dt,.ds) .cs-scena~section .pc-cap>p:not(.pc-eticheta){color:var(--pc-muted,#6E665F)}
/* „Cum o facem”: pe hârtie, numerele zmeurii, garanțiile pe bilet */
.hp:is(.dv,.dt,.ds) .pc-pasi h3{color:var(--pc-ink,#1E1A20)}
.hp:is(.dv,.dt,.ds) .pc-pasi__lista li{border-top-color:rgba(150,112,70,.28)}
.hp:is(.dv,.dt,.ds) .pc-pasi__lista li::before{color:var(--fam-text,var(--pc-zmeura,#C92A48))}
.hp:is(.dv,.dt,.ds) .pc-pasi__lista p{color:var(--pc-muted,#6E665F)}
.hp:is(.dv,.dt,.ds) .pc-pasi__ai{color:#877870}

/* ---------- 4. cardurile, pe hârtia biletului: firul hârtiei, fulgul în relief în colț, chenarul fin ---------- */
.hp:is(.dv,.dt,.ds) :is(.pc-ce__card,.pc-format,.pc-format.is-acesta,.cp-garantii li,.dt-cum__pas,.dt-piesa,.ds-format--supliment){background:var(--hp-bilet);border:0;box-shadow:var(--hp-bilet-umbra);outline:1px solid rgba(150,112,70,.16);outline-offset:-8px}
.hp:is(.dv,.dt,.ds) :is(.pc-ce__card,.pc-format){border-radius:22px}
.hp:is(.dv,.dt,.ds) .pc-format{padding:30px 28px 28px}
.hp:is(.dv,.dt,.ds) .ds-format--supliment{outline:1.5px dashed rgba(150,112,70,.34)}
.hp:is(.dv,.dt,.ds) .cp-garantii li{padding:16px 18px 16px 44px;border-radius:18px}
.hp:is(.dv,.dt,.ds) .cp-garantii li::before{left:17px;top:16px;color:var(--pc-zmeura,#C92A48)}
/* prețul tăiat lângă prețul de acum: la „Formate și prețuri” și în pașii configuratorului */
.hp-pret-rand{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0}
.hp-pret-rand s{font-size:16px;font-weight:600;color:#8A7C74;text-decoration-thickness:1.5px}
.hp:is(.dv,.dt,.ds) .cs-format__pret .hp-vechi{margin-left:4px;font:600 14px/1 var(--font-body);color:#8A7C74;text-decoration-thickness:1.5px}

/* ---------- 5. scrisul de mână, zmeuriu: semnătura de pe desen și „prinde viață” ---------- */
.hp.dv :is(.dv-print__hartie b,.dv-craciun__hartie span,.dv-prinde){font-family:"hooo Scris","Segoe Script",cursive;font-style:normal;font-weight:600;color:var(--hp-zmeura-scris)}
.hp.dv .dv-print__hartie b{font-size:clamp(15px,2.1vw,24px)}
.hp.dv .dv-craciun__hartie span{font-size:clamp(12px,1.25vw,15px)}
.hp.dv .dv-prinde{font-size:clamp(14px,3.8cqw,19px)}

/* ---------- 6. „Desenul meu prinde viață”: Ediția de Crăciun și înrămatul, pe aceeași hârtie ---------- */
.hp.dv .dv-craciun__stele{display:none}
.hp.dv .dv-craciun__p{color:var(--pc-muted,#6E665F)}
.hp.dv .dv-craciun__lista li{color:var(--pc-ink,#1E1A20)}
.hp.dv .dv-craciun__lista li::before{color:var(--pc-zmeura,#C92A48)}
.hp.dv .dv-craciun__nota,.hp.dv .dv-craciun__scena figcaption{color:#877870}
.hp.dv .dv-craciun__ecran{box-shadow:0 30px 55px -28px rgba(14,26,63,.6)}

/* ---------- 7. „Din partea tuturor”: cum strângem mesajele și muzica, pe aceeași hârtie ---------- */
.hp.dt .dt-cum__pas{border-radius:24px}
.hp.dt .dt-piesa{--acc-t:#7A4A10}
.hp.dt .dt-piesa--festiva{--acc-t:#A11F3A}
.hp.dt .dt-piesa--emotionanta{--acc-t:#4B3C9C}
.hp.dt .dt-piesa--vesela{--acc-t:#2F6A1F}
.hp.dt .dt-piesa.is-canta{background:var(--hp-bilet);box-shadow:var(--hp-bilet-umbra),inset 0 0 0 2px var(--acc)}
.hp.dt .dt-piesa__play:focus-visible{outline-color:var(--pc-ink,#1E1A20)}
.hp.dt .dt-piesa__text b{color:var(--pc-ink,#1E1A20)}
.hp.dt .dt-piesa__text span{color:var(--pc-muted,#6E665F)}
.hp.dt .dt-piesa__unda i{background:rgba(30,26,32,.14)}
.hp.dt .dt-piesa__timp{color:#877870}
.hp.dt .dt-piesa__aleg{color:var(--acc-t)}
.hp.dt .dt-muzica__nota{color:var(--pc-muted,#6E665F)}
.hp.dt .dt-muzica__nota a{color:var(--pc-zmeura,#C92A48)}

/* ---------- 8. ecrane mai mici ---------- */
@media (max-width:899px){
  .hp:is(.dv,.dt,.ds) .cs-atelier{padding-top:84px;padding-bottom:88px}
  .hp:is(.dv,.dt,.ds) .cs-atelier~section,.hp:is(.dv,.dt,.ds) .cs-scena~section{padding:40px 0}
  .hp:is(.dv,.dt,.ds) .cs-atelier+section,.hp:is(.dv,.dt,.ds) .cs-scena+section{padding-top:86px}
}
@media (max-width:760px){
  .hp:is(.dv,.dt,.ds) .pc-hero{padding-bottom:84px}
  .hp-pentru{margin:-2px 0 16px;font-size:clamp(30px,8.6vw,42px)}
  .hp-oferte{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-bottom:20px}
  .hp-oferta{display:grid;align-content:start;gap:3px;padding:11px 12px;white-space:normal;border:1px solid rgba(255,243,227,.18);border-radius:14px;background:rgba(255,243,227,.05)}
  .hp-oferta+.hp-oferta{padding-left:12px;border-left:1px solid rgba(255,243,227,.18)}
  .hp-oferta span{font-size:12px;line-height:1.3}
  .hp-oferta b{font-size:20px}
  .hp-oferta s{font-size:12.5px}
  .hp:is(.dv,.dt,.ds) .pc-cta>.pc-btn--zmeura{order:1;white-space:normal;text-align:center}
  .hp:is(.dv,.dt,.ds) .pc-cta>.hp-garantie{order:2;justify-content:center}
  .hp:is(.dv,.dt,.ds) .pc-cta>.pc-btn--contur{order:3}
  .hp:is(.dv,.dt,.ds) .pc-format{padding:26px 22px 24px}
}

/* ---------- 9. „Azi vorbim despre tine” (.hp.pd, #307) și „Vocea de acasă” (.hp.vc, #295), 22.10.2026, Adrian ----------
   Același limbaj, pe clasele lor (assets/podcast.css, assets/vocea.css): numele scris de mână sub titlu, prețurile pe pachete,
   garanția sub buton; ghidul („Hai s-o pregătim.”, „Hai să facem biblioteca.”) urcă peste primul ecran pe o margine de troian, iar
   prima secțiune de după el urcă peste ghid; după ghid, totul pe aceeași hârtie crem (și raftul poveștilor, înainte pe noapte), cu
   cardurile pe hârtia biletului. Ghidul rămâne imediat după prima secțiune și nu se schimbă. */
.hp:is(.pd,.vc) :is(.pd-erou,.vc-erou){padding-bottom:clamp(100px,8.5vw,128px)}
.hp:is(.pd,.vc) .hp-pentru{margin:-6px 0 0}
.hp:is(.pd,.vc) .hp-oferte{margin:4px 0 0}
.hp:is(.pd,.vc) .hp-garantie{margin-top:4px}
.hp.pd .pd-erou__ai{margin-top:28px}
/* haloul care pulsează în jurul butonului (assets/podcast.css, .pd-cta::before) nu lățește pagina pe telefon, unde butonul ia tot rândul
   (la „Vocea de acasă”, primul ecran taie deja tot ce iese) */
.hp.pd .pd-erou{overflow-x:clip}
/* trecerile */
.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier),.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)+section{position:relative;z-index:1;margin-top:-46px;
  -webkit-mask:var(--hp-troian) 0 0/100% 48px no-repeat,linear-gradient(#000,#000) 0 46px/100% calc(100% - 46px) no-repeat;
  mask:var(--hp-troian) 0 0/100% 48px no-repeat,linear-gradient(#000,#000) 0 46px/100% calc(100% - 46px) no-repeat}
.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier){padding-top:104px;padding-bottom:110px}
.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)+section{z-index:2}
/* după ghid, o singură hârtie */
.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)~section{padding:clamp(48px,5.4vw,72px) 0;background:var(--hp-hartie);color:var(--pc-ink,#1E1A20)}
.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)+section{padding-top:calc(46px + clamp(52px,5.4vw,72px))}
.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)~section :is(.pd-sect-cap,.vc-sect-cap) h2{color:var(--pc-ink,#1E1A20)}
.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)~section :is(.pd-sect-cap,.vc-sect-cap) h2 em{color:var(--pc-zmeura,#C92A48)}
.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)~section :is(.pd-eticheta,.vc-eticheta){color:var(--pc-zmeura,#C92A48)}
.hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)~section :is(.pd-sect-cap,.vc-sect-cap)>p:not(.pd-eticheta):not(.vc-eticheta){color:var(--pc-muted,#6E665F)}
/* cardurile, pe hârtia biletului */
.hp:is(.pd,.vc) :is(.pd-cadoul__fig,.pd-cadoul__pasi li,.vc-cadoul__fig,.vc-cadoul__pasi li,.vc-raft__btn,.vc-voci__lista li){background:var(--hp-bilet);border:0;box-shadow:var(--hp-bilet-umbra);outline:1px solid rgba(150,112,70,.16);outline-offset:-8px}
.hp:is(.pd,.vc) :is(.pd-cadoul__fig,.vc-cadoul__fig){padding:28px 20px 24px;border-radius:24px}
.hp:is(.pd,.vc) :is(.pd-cadoul__pasi li,.vc-cadoul__pasi li){padding:20px 22px;border-radius:20px}
.hp:is(.pd,.vc) :is(.pd-cadoul__nr,.vc-cadoul__nr){color:var(--pc-zmeura,#C92A48)}
.hp.pd .pd-cadoul__nota{color:#877870}
.hp.vc .vc-voci__lista li{padding:16px 22px 16px 20px;border-radius:18px}
/* „Vocea de acasă”: raftul poveștilor, de pe noapte pe hârtie */
.hp.vc .vc-raft__btn{border-radius:22px;overflow:hidden;outline-offset:-6px}
@media (hover:hover){.hp.vc .vc-raft__btn:hover{background:var(--hp-bilet)}}
.hp.vc .vc-raft__titlu{color:var(--pc-ink,#1E1A20)}
.hp.vc .vc-raft__meta{color:#8A5A12}
.hp.vc .vc-raft__inceput{color:var(--pc-muted,#6E665F)}
.hp.vc .vc-raft__mai{color:var(--pc-zmeura,#C92A48)}
.hp.vc .vc-raft__btn:focus-visible{outline:3px solid var(--pc-ink,#1E1A20);outline-offset:2px}
@media (max-width:899px){
  .hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier){padding-top:84px;padding-bottom:88px}
  .hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)~section{padding:40px 0}
  .hp:is(.pd,.vc) :is(.pd-atelier,.vc-atelier)+section{padding-top:86px}
}
@media (max-width:760px){
  .hp:is(.pd,.vc) :is(.pd-erou,.vc-erou){padding-bottom:84px}
  .hp:is(.pd,.vc) .hp-pentru{margin:-6px 0 0}
  .hp:is(.pd,.vc) .hp-oferte{width:100%;margin:2px 0 0}
  .hp:is(.pd,.vc) :is(.pd-erou__actiune,.vc-erou__actiune){justify-items:stretch}
  .hp:is(.pd,.vc) :is(.pd-erou__actiune,.vc-erou__actiune) .hp-garantie{justify-content:center}
  .hp:is(.pd,.vc) :is(.pd-cta,.vc-cta){padding-inline:24px;text-align:center}
}