:root{
  --cream:#FBF6F1;--cream2:#F6EDE6;--plum:#2E1B23;--wine:#872B48;--sand:#C8A473;
  --tx:#2E1B23;--tx-60:rgba(46,27,35,.78);--tx-38:rgba(46,27,35,.5);--tx-12:rgba(46,27,35,.12);
  /* culorile de marca, exact ca in logo */
  --logo-verde:#2E9245;--logo-albastru:#3EA9DC;--logo-violet:#9B62B8;
  --f:"DM Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Bara de sus e fixed, 96px pe desktop si 74px sub 900. Fara rezerva, ancorele
   aterizau cu titlul sectiunii ascuns sub ea. Rezerva inaltimea barii plus aer. */
section[id],#continut{scroll-margin-top:112px}
@media(max-width:900px){section[id],#continut{scroll-margin-top:88px}}
body{margin:0;background:var(--cream);color:var(--tx);font-family:var(--f);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:19px;line-height:1.62}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:var(--f)}

section{padding:clamp(46px,5.2vw,72px) clamp(22px,6vw,60px);text-align:center;position:relative}
.in{max-width:880px;margin:0 auto;width:100%}
.tight{max-width:700px}

h1,h2{font-weight:200;letter-spacing:-.04em;line-height:1.06;margin:0}
h1{font-size:clamp(44px,7.4vw,92px)}
h2{font-size:clamp(36px,5.2vw,64px)}
h3{font-weight:400;font-size:23px;letter-spacing:-.02em;margin:0;line-height:1.25}
.sub{font-size:clamp(19px,1.9vw,24px);color:var(--tx-60);line-height:1.5;margin:20px auto 0;max-width:42ch}
.kicker{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--tx-38);font-weight:500;margin-bottom:22px}

.act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.b{display:inline-flex;align-items:center;justify-content:center;padding:19px 44px;font-size:16px;font-weight:400;border-radius:100px;background:var(--wine);color:#fff;border:1px solid var(--wine);transition:.25s;cursor:pointer}
.b:hover{background:#6B2038;border-color:#6B2038}
.b.o{background:transparent;color:var(--tx);border-color:var(--tx-38)}
.b.o:hover{border-color:var(--tx)}
.b:focus-visible{outline:2px solid var(--wine);outline-offset:4px}

/* hero */
/* 88svh, nu 100: sub cap ramane o fasie din sectiunea urmatoare, cat sa se
   ghiceasca primul rand de titlu si sa se vada ca pagina continua. La 1440x900
   fasia are 108px, din care 72 sunt paddingul sectiunii, deci se vad 36 din
   cei 68 ai primului rand. Cifrele pe fiecare latime, in CITESTE.md.
   Valoarea era deja 88svh sub 620, de acolo a fost luata. */
#hero{min-height:88svh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#E8D9D2 url("lotus_hero.jpg") center center/cover no-repeat;padding:clamp(96px,14vh,140px) clamp(22px,6vw,60px) clamp(60px,9vh,96px)}
/* Voalul era .12-.16 exact pe banda unde cade textul, iar lotusul e aproape alb
   acolo: titlul iesea la 1,00:1 contrast, eticheta si subtitlul la 1,33. Masurat,
   pragul de 4,5:1 pe eticheta si subtitlu cere 55%, iar 3:1 pe titlu cere 48%.
   Ridicam mijlocul la 58%, cu margine, si pastram capetele mai slabe. */
#hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,27,35,.46) 0%,rgba(46,27,35,.58) 26%,rgba(46,27,35,.58) 68%,rgba(46,27,35,.5) 100%)}
#hero .in{position:relative;z-index:2;color:#fff}
#hero h1{color:#fff;text-shadow:0 2px 30px rgba(30,16,22,.45)}
#hero .sub{color:rgba(255,255,255,.94);text-shadow:0 1px 20px rgba(30,16,22,.45);max-width:52ch}
/* eticheta se citea greu pe fotografie: mai mare cu 2px, alb plin in loc de 82%,
   si o umbra difuza mai densa, ca la titlu */
#hero .kicker{font-size:15px;color:#fff;margin-bottom:24px;
  text-shadow:0 2px 22px rgba(30,16,22,.8),0 0 46px rgba(30,16,22,.45)}
#hero .b.o{color:#fff;border-color:rgba(255,255,255,.62);backdrop-filter:blur(4px)}
#hero .b.o:hover{background:rgba(255,255,255,.14);border-color:#fff}
.logo{width:clamp(230px,30vw,340px);margin:0 auto clamp(30px,4.5vh,50px);filter:drop-shadow(0 1px 14px rgba(30,16,22,.45))}
.trust{margin-top:32px;font-size:15px;color:rgba(255,255,255,.82);text-shadow:0 1px 16px rgba(30,16,22,.5);display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.trust i{font-style:normal;opacity:.5}

.dark{background:var(--plum);color:#fff}
.detaliu{margin:clamp(26px,3.2vw,36px) auto 0;max-width:64ch;font-size:16px;line-height:1.55;color:rgba(255,255,255,.66)}
.dark .kicker{color:rgba(255,255,255,.34)}
.dark .sub{color:rgba(255,255,255,.62)}
.dark h3{color:#fff}
.dark .b.o{color:#fff;border-color:rgba(255,255,255,.3)}
.dark .b.o:hover{border-color:#fff}
.soft{background:var(--cream2)}

/* motive */
/* Cardul intrebare-raspuns care se intoarce pe axa Y.
   Cele doua fete stau suprapuse in aceeasi celula de grila, amandoua in flux,
   ca inaltimea cardului sa fie maximul dintre ele. Fara pozitionare absoluta,
   altfel fetele n-ar mai dicta inaltimea si ar trebui una fixa. */
.qgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2.2vw,24px);
  grid-auto-rows:1fr;margin-top:clamp(32px,3.8vw,44px)}
/* fiecare card tine doua coloane din sase; perechea de jos se aseaza pe 2-3 si
   4-5, deci ramane centrata pe aceeasi axa cu titlul si cu banda de dedesubt */
.qgrid .qc{grid-column:span 2}
.qgrid .qc:nth-child(4){grid-column:2/span 2}
.qgrid .qc:nth-child(5){grid-column:4/span 2}

.qc{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;perspective:1400px;text-align:inherit;display:block;width:100%}
/* grid-auto-rows:1fr da inaltime egala tuturor cardurilor, deci grila nu sare
   cand se intoarce unul. Cel mai lung raspuns o dicteaza. */
.qc-in{display:grid;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);height:100%}
.qc[aria-expanded="true"] .qc-in{transform:rotateY(180deg)}
.qc-fata,.qc-spate{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#fff;border:1px solid rgba(46,27,35,.09);border-radius:18px;
  box-shadow:0 1px 2px rgba(46,27,35,.04),0 8px 24px -18px rgba(46,27,35,.22);
  transition:border-color .28s ease,box-shadow .28s ease}
.qc-fata{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(32px,3.2vw,46px) clamp(22px,2.2vw,30px) clamp(40px,3.6vw,52px)}
/* spatele se citeste centrat, ca fata: pe orizontala si pe verticala, cu masura
   limitata, ca textul sa nu ajunga la marginile cardului */
.qc-spate{transform:rotateY(180deg);text-align:center;display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,2.8vw,38px) clamp(22px,2.2vw,30px);
  font-size:17.5px;line-height:1.55;color:var(--tx-60);font-weight:300}
/* La 18px, 25ch coincide cu latimea interioara a cardului, deci masura nu mai
   strange nimic. Ramane ca sa reintre in joc daca fontul scade la loc. */
.qc-raspuns{max-width:25ch}
.qc-intrebare{font-size:clamp(21px,1.9vw,25px);line-height:1.25;font-weight:400;letter-spacing:-.02em;color:var(--tx)}
.qc-semn{position:absolute;right:16px;bottom:14px;color:var(--sand);display:flex;
  transition:transform .28s ease}
.qc:hover .qc-fata,.qc:hover .qc-spate{border-color:rgba(200,164,115,.6);
  box-shadow:0 2px 4px rgba(46,27,35,.05),0 18px 40px -22px rgba(46,27,35,.34)}
.qc:hover .qc-semn{transform:rotate(90deg)}
.qc:focus-visible{outline:2px solid var(--wine);outline-offset:4px;border-radius:20px}
@media(prefers-reduced-motion:reduce){.qc-in,.qc-semn{transition:none}}

@media(max-width:1000px){
  .qgrid{grid-template-columns:repeat(4,1fr)}
  .qgrid .qc,.qgrid .qc:nth-child(4){grid-column:span 2}
  .qgrid .qc:nth-child(5){grid-column:2/span 2}
}
@media(max-width:620px){
  .qgrid{grid-template-columns:1fr}
  .qgrid .qc,.qgrid .qc:nth-child(4),.qgrid .qc:nth-child(5){grid-column:auto}
}

.banner{margin-top:clamp(34px,4.5vw,48px);font-size:clamp(19px,2.1vw,25px);line-height:1.45;font-weight:300;letter-spacing:-.02em;color:var(--tx);max-width:34ch;margin-inline:auto}

/* metoda */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);margin-top:clamp(32px,3.8vw,44px)}
@media(max-width:800px){.three{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.three>div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:clamp(32px,3vw,42px) clamp(24px,2.4vw,32px);transition:background .28s ease,border-color .28s ease}
.three>div:hover{background:rgba(255,255,255,.08);border-color:rgba(200,164,115,.55)}
.three .n{font-size:13px;letter-spacing:.24em;color:var(--sand);font-weight:500;margin-bottom:14px}
.three p{margin:12px 0 0;font-size:17px;color:rgba(255,255,255,.62)}

/* teo */
.face{width:clamp(230px,30vw,320px);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto clamp(30px,4vw,42px);border:1px solid rgba(200,164,115,.55);padding:6px;background:#fff;box-shadow:0 10px 34px -22px rgba(46,27,35,.4)}
.face img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;border-radius:50%}
blockquote.said{margin:clamp(34px,4vw,46px) auto 0;padding-top:clamp(30px,3.4vw,40px);border-top:1px solid rgba(200,164,115,.5);max-width:26ch;font-style:italic}
.said{font-size:clamp(24px,3.1vw,36px);font-weight:200;letter-spacing:-.03em;line-height:1.28;max-width:19ch;margin:0 auto}
.name{margin-top:28px;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--tx-38);font-weight:500}
.tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:clamp(30px,3.6vw,40px)}
.tag{border:1px solid var(--tx-12);padding:9px 17px;font-size:14px;color:var(--tx-60);border-radius:100px}

/* recenzii */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px);margin-top:clamp(30px,3.6vw,40px)}
@media(max-width:860px){.revs{grid-template-columns:1fr}}
.rev{background:#fff;border:1px solid rgba(46,27,35,.09);padding:34px 30px;border-radius:18px;box-shadow:0 1px 2px rgba(46,27,35,.04),0 8px 24px -18px rgba(46,27,35,.22);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.rev:hover{transform:translateY(-3px);border-color:rgba(200,164,115,.6);box-shadow:0 2px 4px rgba(46,27,35,.05),0 18px 40px -22px rgba(46,27,35,.34)}
.rev p{margin:0 0 18px;font-size:18px;line-height:1.5;color:var(--tx-60)}
.rev .who{font-size:14px;color:var(--tx-38)}
.st{color:var(--sand);letter-spacing:3px;font-size:13px;margin-bottom:14px}

/* cardurile de sedinte */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px);margin-top:clamp(32px,3.8vw,44px);text-align:center;align-items:stretch}
.plans.two{grid-template-columns:repeat(2,1fr);margin-top:clamp(16px,2.2vw,24px);max-width:900px;margin-inline:auto}
@media(max-width:940px){.plans,.plans.two,.plans.one{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.plan{background:#fff;border:1px solid rgba(46,27,35,.09);border-radius:18px;padding:clamp(30px,2.8vw,40px);display:flex;flex-direction:column;align-items:center;position:relative;box-shadow:0 1px 2px rgba(46,27,35,.04),0 8px 24px -18px rgba(46,27,35,.22);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.plan:hover{transform:translateY(-3px);border-color:rgba(200,164,115,.6);box-shadow:0 2px 4px rgba(46,27,35,.05),0 18px 40px -22px rgba(46,27,35,.34)}
.plan.hi{border-color:var(--sand);box-shadow:0 2px 4px rgba(46,27,35,.05),0 20px 46px -24px rgba(46,27,35,.4)}
.plan .rib{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--sand);color:#fff;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:6px 16px;border-radius:100px;white-space:nowrap}
.plan .rib.rib-o{background:var(--cream2);color:var(--tx-60);border:1px solid rgba(46,27,35,.16)}
.plan h3{font-size:clamp(21px,1.9vw,25px);line-height:1.2;margin:0}
.plan .amt{margin:16px 0 0;font-size:clamp(28px,2.8vw,36px);font-weight:200;letter-spacing:-.03em;line-height:1.1;color:var(--tx)}
.plan .amt small{display:block;font-size:15px;font-weight:300;color:var(--tx-38);letter-spacing:0;margin-top:6px}
.plan .who{max-width:34ch;margin:20px auto 0;font-size:16.5px;line-height:1.55;color:var(--tx-60)}
.plan ul{list-style:none;margin:20px 0 0;padding:0}
.plan li:last-child{margin-bottom:0}
.plan li{position:relative;padding-left:22px;margin-bottom:10px;font-size:15.5px;line-height:1.5;color:var(--tx-60)}
.plan li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-left:1px solid var(--sand);border-bottom:1px solid var(--sand);transform:rotate(-45deg)}
.plan .foot .b{width:100%;text-align:center;justify-content:center}
.plan .foot{margin-top:auto;padding-top:30px;width:100%}


/* modul de programare */
/* cutia se opreste la 720px: cu o coloana de continut de 460, cei 1160 ai
   containerului lasau marginile albe si faceau tab-urile disproportionat de
   late fata de ce e sub ele. Pe mobil nu are efect, latimea e oricum mai mica. */
.booker{max-width:720px;margin-inline:auto;margin-top:0;background:#fff;border:1px solid rgba(46,27,35,.09);border-radius:20px;box-shadow:0 1px 2px rgba(46,27,35,.04),0 14px 40px -26px rgba(46,27,35,.3);overflow:hidden;text-align:center;display:block}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(46,27,35,.09)}
.tabs button{background:#F7F1EB;border:0;border-bottom:2px solid transparent;border-radius:0;font-family:var(--f);font-size:16px;font-weight:400;color:var(--tx-38);padding:22px 14px;cursor:pointer;transition:.22s}
.tabs button:hover{color:var(--tx)}
.tabs button[aria-selected="true"]{background:#fff;color:var(--tx);border-bottom-color:var(--wine)}
.tabs button:focus-visible{outline:2px solid var(--wine);outline-offset:-3px}
.pane{padding:clamp(26px,3.2vw,44px)}
.pane[hidden]{display:none}
.stp{margin-bottom:30px}
.stp:last-child{margin-bottom:0}
.stp>h4{margin:0 0 16px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--tx-38)}
.stp>h4 b{color:var(--wine);font-weight:500;margin-right:8px}
.dayrow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media(max-width:620px){.dayrow{grid-template-columns:repeat(3,1fr)}}
.dd{border:1px solid rgba(46,27,35,.16);background:#fff;font-family:var(--f);color:var(--tx);padding:14px 6px;border-radius:12px;cursor:pointer;text-align:center;transition:.2s;font-weight:300}
.dd:hover{border-color:var(--sand)}
.dd[aria-pressed="true"]{border-color:var(--sand);background:rgba(200,164,115,.14)}
.dd em{font-style:normal;display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-38);margin-bottom:5px}
.dd span{font-size:18px}
.hr{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hh{border:1px solid rgba(46,27,35,.16);background:#fff;font-family:var(--f);color:var(--tx);padding:12px 22px;border-radius:100px;cursor:pointer;font-size:15.5px;font-weight:300;transition:.2s}
.hh:hover{border-color:var(--sand)}
.hh[aria-pressed="true"]{border-color:var(--sand);background:rgba(200,164,115,.14)}
.hint{font-size:14px;color:var(--tx-38);margin:12px 0 0}
.buy{display:grid;gap:10px}
.buy label{display:flex;align-items:flex-start;gap:14px;border:1px solid rgba(46,27,35,.16);border-radius:14px;padding:18px 20px;cursor:pointer;transition:.2s}
.buy label:hover{border-color:var(--sand)}
.buy label.on{border-color:var(--sand);background:rgba(200,164,115,.1)}
.buy input{margin:3px 0 0;accent-color:var(--wine);width:17px;height:17px;flex:none}
.buy .t{font-size:17px;line-height:1.35}
.buy .t small{display:block;font-size:14.5px;color:var(--tx-38);margin-top:4px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.fields{grid-template-columns:1fr}}
.fields input{width:100%;font-family:var(--f);font-size:16px;font-weight:300;color:var(--tx);border:1px solid rgba(46,27,35,.16);border-radius:12px;padding:15px 16px;background:#fff}
.fields input::placeholder{color:var(--tx-38)}
.fields input:focus{outline:0;border-color:var(--sand)}
.wide{grid-column:1/-1}
.summary{background:#F7F1EB;border-radius:14px;padding:20px 22px;margin-top:22px;font-size:16px;line-height:1.6}
.summary .ln{display:flex;justify-content:space-between;gap:14px;color:var(--tx-60)}
.summary .ln.tot{margin-top:10px;padding-top:12px;border-top:1px solid rgba(46,27,35,.12);color:var(--tx);font-size:19px}
.summary .ln.tot b{font-weight:400}
.go{margin-top:20px;width:100%;justify-content:center}
.mini{font-size:14px;color:var(--tx-38);margin:14px 0 0;text-align:center}
.locked{opacity:.42;pointer-events:none}
.found{background:rgba(200,164,115,.14);border:1px solid rgba(200,164,115,.5);border-radius:14px;padding:20px 22px;font-size:17px;line-height:1.5}
.found b{font-weight:400}
.found small{display:block;font-size:14.5px;color:var(--tx-60);margin-top:5px}

/* Programari: continutul pasilor se citeste centrat, pe o coloana asezata in
   mijlocul panoului, care altfel are peste 1000px si intinde totul. O singura
   latime pentru toate blocurile, ca marginile lor sa cada pe aceeasi verticala. */
.pane{--col:460px}
.dayrow,.hr,.buy,.fields,.summary,.found,.go,.mini{max-width:var(--col);margin-inline:auto}
.hr{justify-content:center}
/* Ce nu se centreaza: in optiuni si in campuri textul ramane la stanga, iar in
   sumar randurile raman pe doua capete, fiindca acolo alinierea e informatia,
   se citeste ce platesti si cat. Se centreaza doar blocurile lor. */
.buy label{text-align:left}
.fields,.summary{text-align:left}
.fields input{text-align:left}



/* header care apare la scroll */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(251,246,241,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(46,27,35,.09);transform:none}
body.page .hdr{transform:none}

/* Laterale egale prin minmax(0,1fr): coloana din mijloc cade pe axa ferestrei,
   nu pe mijlocul spatiului ramas intre logo si buton. Paddingul lateral e
   acelasi clamp ca la sectiuni, ca logoul sa nu se lipeasca de margine. */
.hdr-in{position:relative;margin:0 auto;padding:0 clamp(22px,6vw,60px);height:96px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:clamp(16px,2vw,32px)}
.hdr .nav-c{justify-self:center;display:flex;align-items:center;gap:clamp(16px,2.2vw,40px);
  font-size:clamp(15px,1.3vw,19px);font-weight:500;color:var(--tx);white-space:nowrap}
.hdr .nav-c a{color:var(--tx);padding:8px 2px;transition:color .2s}
.hdr .nav-c a:hover{color:var(--wine)}
.hdr .mark{display:block;justify-self:start;margin:0}
.hdr .mark img{height:clamp(42px,4.4vw,62px);width:auto;display:block}
.hdr .b{justify-self:end;padding:16px 34px;font-size:15px;font-weight:500;white-space:nowrap;background:var(--wine);border-color:var(--wine);color:#fff}
.hdr .b:hover{background:#6B2038;border-color:#6B2038}

.burger{display:none;position:absolute;right:14px;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;background:none;cursor:pointer;padding:0;align-items:center;justify-content:center;z-index:2}
.burger span{display:block;position:relative;width:24px;height:1.6px;background:var(--tx);border-radius:2px;transition:transform .3s ease,opacity .2s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:1.6px;background:var(--tx);border-radius:2px;transition:transform .3s ease}
.burger span::before{top:-8px}
.burger span::after{top:8px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-8px) rotate(-45deg)}
.drawer{position:fixed;left:0;right:0;top:0;z-index:59;background:var(--cream);border-bottom:1px solid rgba(46,27,35,.1);padding:88px clamp(22px,7vw,40px) 30px;transform:translateY(-102%);transition:transform .38s cubic-bezier(.4,0,.2,1);box-shadow:0 24px 50px -30px rgba(46,27,35,.5)}
.drawer.open{transform:none}
.drawer a{display:block;font-size:21px;font-weight:300;letter-spacing:-.02em;color:var(--tx);padding:15px 0;border-bottom:1px solid rgba(46,27,35,.09)}
.drawer a:last-of-type{border-bottom:0}
.drawer .b{display:flex;width:100%;align-items:center;justify-content:center;text-align:center;margin-top:22px;padding:17px 24px;border-bottom:0;font-size:15px;font-weight:500;color:#fff}
.scrim{position:fixed;inset:0;z-index:58;background:rgba(46,27,35,.4);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.open{opacity:1;visibility:visible}
body.blocat{overflow:hidden}
@media(max-width:900px){
  .hdr .nav-c{display:none}
  .hdr .b{display:none}
  .burger{display:flex}
  .hdr-in{grid-template-columns:1fr;height:74px;justify-items:center;padding:0 60px}
  .hdr .mark{justify-self:center}
  .hdr .mark{margin:0 auto}
  .hdr .mark img{height:40px}
}
/* Intre 901 si 1000 cele trei blocuri nu mai incap la marimile mari: butonul,
   184px, e piesa care nu se poate ingusta singura. Stramtam grupul de linkuri si
   paddingul butonului, ca lateralele sa ramana egale fara suprapunere. */
@media(min-width:901px) and (max-width:1000px){
  .hdr .nav-c{gap:14px}
  .hdr .b{padding-inline:22px}
}
@media(min-width:901px){.drawer,.scrim,.burger{display:none}}


/* servicii conexe */
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px);margin-top:clamp(32px,3.8vw,44px);text-align:center}
@media(max-width:940px){.extras,.extras.two,.extras.one{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.ex{background:#fff;border:1px solid rgba(46,27,35,.09);border-radius:18px;padding:clamp(28px,2.8vw,38px);display:flex;flex-direction:column;align-items:center;box-shadow:0 1px 2px rgba(46,27,35,.04),0 8px 24px -18px rgba(46,27,35,.22);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.ex:hover{transform:translateY(-3px);border-color:rgba(200,164,115,.6);box-shadow:0 2px 4px rgba(46,27,35,.05),0 18px 40px -22px rgba(46,27,35,.34)}
.ex svg{color:var(--sand);margin:0 auto 20px}
.ex h3{font-size:22px;line-height:1.22;margin:0 0 12px}
.ex p{margin:0 auto;font-size:16.5px;line-height:1.55;color:var(--tx-60);max-width:32ch}
.ex .meta{margin-top:auto;padding-top:20px;font-size:15px;color:var(--tx-38);width:100%}

/* jurnal */
/* flex, nu grila: intr-o grila ultimul rand incomplet ramane lipit la stanga.
   Cu flex si justify-content:center se aseaza pe mijloc. Latimea cardului o
   calculam din gap, ca sa iasa tot trei pe rand. */
.posts{--g:clamp(16px,2.2vw,24px);display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--g);margin-top:clamp(32px,3.8vw,44px);text-align:center}
.posts>.post{width:calc((100% - 2 * var(--g)) / 3)}
@media(max-width:940px){.posts{max-width:560px;margin-inline:auto}.posts>.post{width:100%}}
.post{background:#fff;border:1px solid rgba(46,27,35,.09);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(46,27,35,.04),0 8px 24px -18px rgba(46,27,35,.22);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.post:hover{transform:translateY(-3px);border-color:rgba(200,164,115,.6);box-shadow:0 2px 4px rgba(46,27,35,.05),0 18px 40px -22px rgba(46,27,35,.34)}
.post .ph{aspect-ratio:3/2;background:#E4D2CC url("jurnal.jpg") center/cover no-repeat}
.post .bd{padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;flex:1}
/* categoria plus data incape pe un rand la unele carduri si pe doua la altele,
   ceea ce facea randurile inegale; fixam doua randuri */
.post .dt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-38);font-weight:500;min-height:3.24em;margin-bottom:12px}
/* min-height de doua randuri: cu flex, inaltimile se egalizeaza doar in cadrul
   unui rand, iar un titlu de un rand facea cardul mai scund decat vecinii */
.post h3{font-size:21px;line-height:1.24;min-height:2.48em;margin:0 0 12px;font-weight:400}
/* titlul si rezumatul se opresc la doua randuri, ca sa nu mai iasa carnati.
   Cardurile raman egale intre ele prin grid-auto-rows:1fr de pe .posts. */
.post h3,.post p{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:2;line-clamp:2}
.post p{margin:0;font-size:16px;line-height:1.55;min-height:3.1em;color:var(--tx-60)}
.post .rd{margin-top:auto;padding-top:20px;font-size:15px;color:var(--wine)}
.post h3 a,.post .rd a{color:inherit}
.post[hidden]{display:none}


/* buton inapoi sus */
.totop{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:55;width:54px;height:54px;border-radius:50%;border:1px solid rgba(46,27,35,.12);background:rgba(251,246,241,.92);backdrop-filter:blur(12px);color:var(--tx);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(46,27,35,.06),0 14px 34px -18px rgba(46,27,35,.4);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,visibility .3s,border-color .2s,background .2s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--sand);background:#fff}
.totop:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
@media(max-width:600px){.totop{width:48px;height:48px}}
/* invitatie de programare */
.invite{margin-top:clamp(34px,4vw,48px);text-align:center}
.invite h3{font-size:clamp(24px,2.6vw,32px);font-weight:200;letter-spacing:-.03em;margin:0 0 10px}
.invite p{margin:0 0 24px;font-size:17px;color:var(--tx-60)}
.invite .b{padding-left:52px;padding-right:52px}
.booker.open{display:block;animation:slidein .4s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.closeb{display:block;margin:0 auto;padding:0 0 26px;background:none;border:0;font-family:var(--f);font-size:14.5px;color:var(--tx-38);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.closeb:hover{color:var(--tx)}


/* locatie si contact */
.loc{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,2.6vw,30px);margin-top:clamp(32px,3.8vw,44px);text-align:left;align-items:stretch}
@media(max-width:900px){.loc{grid-template-columns:1fr}}
.mapwrap{border:1px solid rgba(46,27,35,.09);border-radius:18px;overflow:hidden;min-height:380px;box-shadow:0 1px 2px rgba(46,27,35,.04),0 10px 30px -22px rgba(46,27,35,.28)}
.mapwrap iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:saturate(.72) sepia(.16) contrast(.96) brightness(1.03)}
.info{background:#fff;border:1px solid rgba(46,27,35,.09);border-radius:18px;padding:clamp(28px,2.8vw,38px);display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(46,27,35,.04),0 10px 30px -22px rgba(46,27,35,.28)}
.info .row{padding:18px 0;border-bottom:1px solid rgba(46,27,35,.09)}
.info .row:first-child{padding-top:0}
.info .row:last-of-type{border-bottom:0}
.info dt{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-38);font-weight:500;margin-bottom:7px}
.info dd{margin:0;font-size:16.5px;line-height:1.5;color:var(--tx)}
.info dd small{display:block;font-size:14.5px;color:var(--tx-60);margin-top:4px}
.info dd a{border-bottom:1px solid rgba(200,164,115,.7)}
.info dd a:hover{border-bottom-color:var(--wine);color:var(--wine)}
/* Programul, doua coloane: ziua la stanga, orele la dreapta. Randul de weekend
   are text lung, deci se aseaza pe doua randuri, cu nota sub zi, altfel ar
   strivi coloana din stanga pe telefon. */
.orar{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.5}
.orar li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:2px 0}
.orar span{color:var(--tx-60)}
.orar b{font-weight:400;text-align:right}
.orar .inchis{color:var(--tx-38)}
.orar li.dubla{display:block;margin-top:4px}
.orar li.dubla b{display:block;text-align:left;margin-top:1px;color:var(--tx-60)}
.info .wa{margin-top:22px;width:100%;justify-content:center}

/* cta final */
.final{position:relative;background:#2B1A21 url("iaz.jpg") center 46%/cover no-repeat;color:#fff;text-align:center;overflow:hidden;min-height:min(78svh,680px);display:flex;align-items:center;justify-content:center;padding-block:clamp(80px,10vw,130px)}
.final::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,26,33,.62) 0%,rgba(43,26,33,.46) 42%,rgba(43,26,33,.7) 100%)}
.final .in{position:relative;z-index:2}
.final h2,.final .sub{text-shadow:0 2px 26px rgba(30,16,22,.5)}
.final h2{color:#fff}
.final .sub{color:rgba(255,255,255,.72)}
.final .b.o{color:#fff;border-color:rgba(255,255,255,.35)}
.final .b.o:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* footer */
.f-brand{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:0}
.soc{display:flex;gap:14px;justify-content:center;margin:26px 0 0}
.soc a{width:40px;height:40px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.22s;color:rgba(255,255,255,.7)}
.soc a:hover{border-color:var(--sand);color:#fff}
.legal{display:flex;gap:8px 26px;justify-content:center;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);font-size:14px}
.legal a{color:rgba(255,255,255,.6)}
.legal a:hover{color:#fff}
.copy{margin:24px 0 0;font-size:13.5px;color:rgba(255,255,255,.35)}

footer{background:var(--plum);color:rgba(255,255,255,.5);text-align:center;padding:clamp(46px,6.5vh,68px) 22px;font-size:15px}
footer img{width:230px;margin:0 auto 18px;opacity:.9}
.fl{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:16px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* pagina de programari */
body.page{padding-top:0}
/* CAPUL PAGINILOR INTERIOARE, un singur tipar.
   Se aduna in timp altfel pe fiecare pagina: Cercetare avea 790px, Sesiuni
   individuale 371, restul cat cereau titlul si paddingurile. Acum toate au
   aceeasi cutie, aceleasi paddinguri si aceeasi dimensiune de titlu.

   Inaltimea, clamp(340px,32vw,460px), da 460 la 1440 si 340 pe telefon.
   460 fiindca: fotografiile sunt 16:9 sau mai late, iar la 1440 cutia iese
   3,13:1, deci dintr-un cadru 16:9 se vede 57% din inaltime, peste jumatate,
   nu o fasie; sub subtitlu raman aproape 200px in care voalul se stinge in crem,
   iar la 371px stingerea cadea peste text si contrastul pica; si ramane sub
   jumatate dintr-un ecran de 900, deci primul bloc de continut se vede fara
   sa derulezi.

   Continutul e centrat cu flex, nu impins de padding-top, ca sa iasa aceeasi
   inaltime pe toate paginile, indiferent daca subtitlul intra pe unul, doua sau
   trei randuri. Paddingul de jos e mai mare decat cel de sus, deci textul sta
   putin peste mijloc si lasa loc stingerii dedesubt. */
.phead{position:relative;min-height:clamp(340px,32vw,460px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(96px,8vw,110px) clamp(22px,6vw,60px) clamp(60px,11vw,160px);
  background:linear-gradient(180deg,var(--cream2) 0%,var(--cream) 100%)}
.phead .in{position:relative;z-index:2}
.phead h1{font-size:clamp(34px,4.6vw,58px)}
.phead .sub{margin-top:18px}

/* Varianta cu fotografie. Paginile juridice nu o primesc: sunt documente, dar
   pastreaza aceeasi cutie, deci se simte ca fac parte din acelasi site.
   Voalul e dens pana la 86%, sub subtitlu, si abia apoi trece in crem: masurat,
   o stingere care incepe mai sus scade contrastul subtitlului sub prag. */
.phead-foto{background:#2E1B23 center/cover no-repeat}
.phead-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(46,27,35,.80) 0%,rgba(46,27,35,.74) 52%,
    rgba(46,27,35,.66) 86%,rgba(251,246,241,.42) 95%,var(--cream) 100%)}
.phead-foto h1{color:#fff;text-shadow:0 2px 30px rgba(30,16,22,.5)}
.phead-foto .sub{color:rgba(255,255,255,.94);text-shadow:0 1px 20px rgba(30,16,22,.5)}
.phead-foto .meta{color:rgba(255,255,255,.72);text-shadow:0 1px 20px rgba(30,16,22,.5)}

/* SINGURA EXCEPTIE de la tiparul de mai sus: pagina de programari.
   Acolo omul a decis deja si vrea sa apese, iar 460px de cap inseamna derulare
   inainte de calendar, adica friction pur. Capul scade la jumatate, in jur de
   230px, si pastreaza doar titlul cu o linie scurta de reasigurare. Indicatia
   despre al doilea tab a iesit din subtitlu: taburile se vad oricum imediat
   dedesubt, etichetate limpede.
   Nu e o scapare de la tipar, e o abatere cu motiv. Vezi CITESTE.md. */
.phead-mic{min-height:0;padding-top:96px;padding-bottom:clamp(26px,3vw,34px)}
.phead-mic .sub{margin-top:12px;font-size:clamp(17px,1.5vw,19px)}

/* Fotografia fiecarei pagini, cu pozitia potrivita cadrului ei. Procentul spune
   ce ramane in fereastra atunci cand cadrul e mai inalt decat cutia. */
/* Sesiuni individuale iese din tiparul de 460px si merge pe tot ecranul, ca
   hero-ul de pe prima pagina. Motivul, pe larg, in CITESTE.md: e poarta catre
   tot ce se poate cumpara, deci fotografia trebuie sa se vada, nu sa se
   ghiceasca. La 460px se ghicea.

   Doua fisiere. Sursa e 3:2, adica aproape raportul unei cutii de ecran plin
   pe desktop, deci cadrul lat e fotografia intreaga: Teo cu bolurile, toba,
   didgeridoo-ul si cartile de pe jos. Pe telefon cutia e portret, in jur de
   0,46:1, si cover ar pastra doar 31% din latime; cadrul inalt alege el felia,
   centrata pe Teo, cu trei boluri, perna si covorul.

   Pragul nu e latimea, ci raportul ferestrei. La un cap de 100svh cutia are
   raportul ferestrei, iar el decide care cadru se potriveste, nu latimea: o
   fereastra de 900x600 e lata, dar cu prag pe latime ar fi primit cadrul
   portret si l-ar fi taiat la o banda din mijloc, fara cap si fara picioare.
   Peste 1:1 fereastra e lata, deci cadrul lat; sub, portret, deci cel inalt.

   Incadrarea e facuta pe banda vizibila, nu pe cutie: antetul fixat acopera
   primii 97 de pixeli, 75 sub 900, iar voalul se stinge in crem de la 86% in
   jos. Teo cade intre 29% si 69% din inaltime, deci in mijlocul benzii, la
   distanta si de antet si de stingere. */
.ph-sesiuni{background-image:url("cap-sesiuni-teo-inalt.jpg")}
@media(min-aspect-ratio:1/1){
  .ph-sesiuni{background-image:url("cap-sesiuni-teo-lat.jpg")}
}

/* Capul aproape pe tot ecranul. .phead centreaza deja continutul cu flex, deci
   ramane doar inaltimea; paddingul de sus tine titlul sub antetul fixat.
   88svh, nu 100, acelasi cu hero-ul de pe prima pagina: sub cap ramane o fasie
   in care se vad eticheta "Punctul de plecare" si numele primului card. */
.ph-plin{min-height:88svh}

/* Voal propriu. Cel de pe .phead-foto pleaca de la 80% si e facut pentru o
   banda de 460px, unde fotografia e doar fundal; aici ar innegri un perete
   deja luminos si ar ascunde tocmai ce trebuie sa se vada. Mai slab sus si la
   mijloc, cat sa treaca textul alb de praguri, si pastreaza stingerea in crem
   din tipar, ca sa se lege de corpul paginii. Cifrele masurate, in CITESTE.md. */
.ph-plin.phead-foto::after{background:linear-gradient(180deg,
  rgba(46,27,35,.50) 0%,rgba(46,27,35,.52) 32%,
  rgba(46,27,35,.60) 41%,rgba(46,27,35,.60) 57%,
  rgba(46,27,35,.48) 72%,rgba(46,27,35,.44) 82%,
  rgba(251,246,241,.42) 95%,var(--cream) 100%)}
.ph-cercetare{background-image:url("instrumente-sus.jpg");background-position:center 42%}
/* Despre si Jurnal si-au pierdut fotografia din cap pe 7 septembrie 2026:
   cadrele nu tineau, vezi "Banda vizibila" in CITESTE.md. Capul lor e acum
   simplu, ca la paginile juridice, cu aceeasi inaltime si aceleasi paddinguri.
   despre.jpg si jurnal.jpg raman pe disc; jurnal.jpg e si coperta implicita a
   articolelor fara poza proprie, deci e in continuare folosit, la .post .ph si
   la .cover. Cand vin fotografiile noi, se pun inapoi .phead-foto si .ph-*. */
/* Grup si la-cerere si-au pierdut fotografia din cap pe 7 septembrie 2026,
   ca Despre si Jurnal: capul lor e simplu, pe crem, cu aceeasi inaltime si
   aceleasi paddinguri. cap-grup.jpg si cap-cerere.jpg raman pe disc, se pun
   inapoi cu .phead-foto si clasa .ph-* cand vin fotografiile noi. Cu poza in
   cap raman doar sesiuni-individuale si cercetare. */

.pbody{padding:0 clamp(22px,6vw,60px) clamp(60px,7vw,100px)}
.pbody .in{max-width:1160px;margin:0 auto}
.back{display:inline-flex;align-items:center;gap:9px;margin-top:34px;font-size:15px;color:var(--tx-38)}
.back:hover{color:var(--wine)}
.helper{margin-top:clamp(30px,3.6vw,42px);text-align:center;font-size:16px;color:var(--tx-60)}
.helper a{color:var(--wine);border-bottom:1px solid rgba(135,43,72,.35)}

.filters{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(30px,3.6vw,44px)}
.filters button{border:1px solid rgba(46,27,35,.16);background:#fff;font-family:var(--f);font-size:15px;font-weight:300;color:var(--tx-60);padding:11px 22px;border-radius:100px;cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--sand)}
.filters button[aria-pressed="true"]{border-color:var(--sand);background:rgba(200,164,115,.16);color:var(--tx);font-weight:400}

/* articol */

.art .meta{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-38);font-weight:500;margin-top:16px}
.cover{aspect-ratio:16/9;border-radius:18px;margin-bottom:clamp(34px,4vw,48px);background:#E4D2CC url("jurnal.jpg") center/cover no-repeat}
#continut{max-width:720px;margin:0 auto;text-align:left}
#continut p{font-size:18.5px;line-height:1.75;color:var(--tx);margin:0 0 22px;font-weight:300}
#continut h2{font-size:clamp(24px,2.4vw,30px);margin:clamp(34px,4vw,46px) 0 16px;font-weight:200;letter-spacing:-.03em}
#continut .step{border-left:2px solid var(--sand);padding-left:26px;margin:0 0 30px}
#continut .step h3{font-size:21px;margin:0 0 12px;font-weight:400}

/* Pagina Despre Teo: text lung, citit de sus in jos, deci se centreaza pe axa si
   primeste masura, interlinie si aer mai generoase decat restul articolelor.
   Scopat pe .povestea, ca articolele din Jurnal si Cercetarea sa ramana cum sunt. */
#continut.povestea{max-width:none;text-align:center}
/* 56ch, nu 62: unitatea ch se masoara pe glifa 0, mai lata decat media literelor,
   asa ca o cutie de 62ch tine 78 de caractere reale pe rand, peste intervalul
   confortabil de 45-75. La 56ch ies 72. */
#continut.povestea p{max-width:56ch;margin:0 auto 30px;font-size:19.5px;line-height:1.85}
#continut.povestea h2{max-width:24ch;margin-inline:auto}
#continut.povestea h2.titlu{font-size:clamp(36px,5.2vw,64px);letter-spacing:-.04em;
  line-height:1.06;max-width:20ch;margin:0 auto clamp(26px,3vw,34px)}
#continut.povestea .disclaimer{max-width:54ch}
/* lista de formari: pe text centrat bulina arata prost, iar titlul ingrosat
   separa oricum intrarile, deci o scoatem aici */
#continut.povestea .formari.detail li,#formari .formari.detail li{padding-left:0;text-align:center}
#continut.povestea .formari.detail li::before,#formari .formari.detail li::before{display:none}
#continut.povestea .formari.detail li small,#formari .formari.detail li small{max-width:58ch;margin-inline:auto}
/* .formari are text-align:left din regula generala; ca sectiune proprie se
   citeste centrat, la fel ca restul paginii */
#formari .formari{text-align:center}
/* documente juridice: anulare, confidentialitate, protectia consumatorului.
   Text citit cu atentie, pe alocuri cautat punctual, deci masura ramane de
   articol, dar titlurile si regulile se disting clar unele de altele. */
/* paginile de oferta: carduri, nu text lung, deci masura larga si centrata,
   ca pe prima pagina, nu masura de citit a documentelor */
#continut.oferta{max-width:1120px;text-align:center}
#continut.oferta .inapoi-doc{text-align:center;margin-top:clamp(38px,4.4vw,54px)}
#continut.doc{max-width:760px}
#continut.doc h2{font-size:clamp(23px,2.3vw,29px);margin:clamp(40px,4.6vw,56px) 0 18px;
  padding-top:clamp(22px,2.4vw,28px);border-top:1px solid rgba(46,27,35,.12)}
#continut.doc h2:first-of-type{margin-top:clamp(30px,3.4vw,40px)}
#continut.doc h3{font-size:18.5px;font-weight:500;margin:0 0 8px;letter-spacing:-.01em}
#continut.doc .actualizat{font-size:14.5px;color:var(--tx-38);margin-bottom:clamp(26px,3vw,34px)}
/* fiecare regula e o unitate cautata din ochi: "cu peste 48 de ore" trebuie
   gasit fara sa citesti tot. Bara din stanga o desprinde de textul curent. */
#continut.doc .regula{border-left:2px solid var(--sand);padding-left:22px;margin:0 0 24px}
#continut.doc .regula p{margin:0}
#continut.doc .accent{font-weight:400;color:var(--tx)}
#continut.doc .lista{list-style:none;margin:0 0 22px;padding:0}
#continut.doc .lista li{position:relative;padding:7px 0 7px 20px;font-size:17.5px;line-height:1.6;color:var(--tx-60)}
#continut.doc .lista li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--sand)}
#continut.doc .lista li b{color:var(--tx);font-weight:500}
#continut.doc a.in-text{color:var(--wine);border-bottom:1px solid rgba(135,43,72,.35)}
#continut.doc a.in-text:hover{border-bottom-color:var(--wine)}
#continut.doc .inapoi-doc{text-align:center;margin-top:clamp(38px,4.4vw,54px)}
/* tabelele nu se stramteaza sub o anumita latime; sub ea deruleaza in cutia lor,
   ca pagina sa nu capete derulare pe orizontala */
#continut.doc .tabelw{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch}
#continut.doc table{border-collapse:collapse;width:100%;min-width:440px;font-size:16.5px}
#continut.doc th,#continut.doc td{text-align:left;padding:13px 16px;border-bottom:1px solid rgba(46,27,35,.12);vertical-align:top;line-height:1.5}
#continut.doc th{font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-38);border-bottom-color:var(--sand)}
#continut.doc td{color:var(--tx-60)}
#continut.doc tr:last-child td{border-bottom:0}
/* camp de completat. Cat timp mai exista unul, pagina e ciorna: se vede de la
   distanta, ca sa nu ajunga asa in productie. */
.gol{background:rgba(200,164,115,.26);border-bottom:1px dashed var(--sand);
  padding:1px 6px;border-radius:4px;font-size:.94em;white-space:nowrap;color:var(--tx)}

.sig{margin-top:clamp(38px,4.4vw,54px);padding-top:26px;border-top:1px solid rgba(46,27,35,.12);font-size:17px;color:var(--tx-60)}
.sig b{display:block;font-weight:400;color:var(--tx);margin-top:6px}
.artcta{background:var(--cream2);border-radius:18px;padding:clamp(30px,3.4vw,44px);text-align:center;margin-top:clamp(38px,4.4vw,54px)}
.artcta h3{font-size:clamp(22px,2.2vw,28px);font-weight:200;letter-spacing:-.03em;margin:0 0 10px}
.artcta p{font-size:17px;color:var(--tx-60);margin:0 0 22px}
#incheiere .artcta{margin-top:0}
#incheiere .inapoi{text-align:center;margin:34px 0 0}


/* intrebari, carduri fara text sub titlu */

/* grupe de carduri sub Dincolo de sedintele individuale */
.grup{margin-top:clamp(30px,3.6vw,42px)}
.grup-t{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx-38);font-weight:500;margin:0 0 16px}
.grup .extras{margin-top:0}
.extras.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
.extras.one{grid-template-columns:1fr;max-width:520px;margin-inline:auto}

/* cardul lat din Cum poti lucra cu mine */
.plans.one{grid-template-columns:1fr;max-width:900px;margin-inline:auto}
.plans.one .plan .who{max-width:62ch}

/* formari si certificari */
.formari{margin:clamp(30px,3.6vw,42px) auto 0;max-width:none;text-align:left;list-style:none;border-top:1px solid rgba(46,27,35,.12);padding:clamp(22px,2.6vw,28px) 0 0}
.formari ul{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,3vw,44px)}
.formari li{break-inside:avoid}
.formari li{position:relative;padding:9px 0 9px 20px;font-size:15.5px;line-height:1.45;color:var(--tx-60)}
.formari li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--sand)}
.formari.detail{max-width:none;border-top:0;padding-top:0}
.formari.detail li{padding-block:15px}
.formari.detail li b{display:block;font-weight:400;color:var(--tx);margin-bottom:5px}
.formari.detail li small{display:block;font-size:15px;line-height:1.5;color:var(--tx-60)}
.disclaimer{margin:clamp(24px,3vw,32px) auto 0;max-width:54ch;font-size:14.5px;line-height:1.5;color:var(--tx-38)}
#continut .disclaimer{font-size:14.5px;line-height:1.5;color:var(--tx-38);margin:clamp(24px,3vw,32px) auto 0}


/* cele trei categorii de pe prima pagina. Cardul intreg e link, nu doar
   randul de jos: tinta de atins e mare, iar sageata ramane semnalul vizual.

   Alinierea pe orizontala intre carduri se face cu subgrid, nu cu spatiere.
   Al treilea card are eticheta si titlul pe cate doua randuri, deci fara
   randuri comune tot ce urmeaza cobora fata de primele doua. Cele sase randuri
   sunt definite pe container, iar fiecare card le imprumuta, deci fiecare zona
   are aceeasi inaltime in toate trei: cea ceruta de cel mai inalt continut.

   Randul 5 e 1fr, adica absoarbe spatiul ramas. Acolo sta nota primului card,
   lipita de sus, exact unde in celelalte doua incepe golul. Asa nota nu impinge
   linkul si nu lasa gauri in cardurile fara ea. Randul 6, linkul, ramane la baza.

   row-gap:0 pe container fiindca distantele dintre randuri se dau din margini,
   pe fiecare zona; gap-ul de 24px e doar intre carduri, pe orizontala. */
.categorii{display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto auto auto auto 1fr auto;
  column-gap:clamp(16px,2.2vw,24px);row-gap:0;
  margin-top:clamp(32px,3.8vw,44px);text-align:center;align-items:stretch}
.cat{--pad:clamp(30px,2.8vw,40px);
  display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0;
  background:#fff;border:1px solid rgba(46,27,35,.09);border-radius:18px;
  padding:var(--pad);overflow:hidden;
  box-shadow:0 1px 2px rgba(46,27,35,.04),0 8px 24px -18px rgba(46,27,35,.22);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.cat:hover{transform:translateY(-3px);border-color:rgba(200,164,115,.6);
  box-shadow:0 2px 4px rgba(46,27,35,.05),0 18px 40px -22px rgba(46,27,35,.34)}
.cat:focus-visible{outline:2px solid var(--wine);outline-offset:4px}
/* banda foto din capul cardului. Marginile negative anuleaza paddingul
   cardului, deci fotografia atinge marginile; rotunjita doar sus, cu 1px mai
   putin decat cardul, cat tine bordura. Fiind primul rand al subgridului,
   toate trei incep la aceeasi inaltime, ca restul elementelor. */
.cat-foto{grid-row:1;aspect-ratio:16/9;margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  border-radius:17px 17px 0 0;background:var(--cream2) center/cover no-repeat;position:relative}
/* numarul si eticheta, ca la boxurile din Metoda: nisipiu, majuscule spatiate */
.cat-n{grid-row:2;display:flex;align-items:baseline;justify-content:center;gap:9px;
  margin:0 0 16px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--sand)}
.cat-n .et{color:var(--tx-38);letter-spacing:.16em;font-size:11.5px;line-height:1.35}
.cat h3{grid-row:3;font-size:clamp(21px,1.9vw,25px);line-height:1.2;margin:0}
.cat .cat-d{grid-row:4;margin:14px 0 0;font-size:16.5px;line-height:1.55;color:var(--tx-60)}
/* etichetele ca pastile cu contur, nu ca lista: se scaneaza dintr-o privire */
/* flex-start pe ambele axe: fara ele, zona pastilelor fiind egala la toate trei
   cat cea mai inalta, pastilele din cardurile cu mai putine se intindeau pe
   verticala si ieseau ovaluri inalte. Acum isi pastreaza inaltimea si stau sus. */
.pastile{grid-row:5;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;align-content:flex-start;gap:8px;margin-top:20px}
.pastile span{border:1px solid rgba(46,27,35,.16);border-radius:100px;padding:6px 13px;
  font-size:13.5px;line-height:1.3;color:var(--tx-60);white-space:nowrap}
/* nota primului card: mai mica si mai stinsa decat descrierea, ca sa nu concureze */
.cat .cat-nota{grid-row:6;align-self:start;margin:16px 0 0;
  font-size:14px;line-height:1.5;color:var(--tx-38)}
.cat-link{grid-row:7;padding-top:26px;display:flex;align-items:center;justify-content:center;
  gap:9px;font-size:15.5px;color:var(--wine)}
.cat-link svg{transition:transform .28s ease;flex:none}
.cat:hover .cat-link svg{transform:translateX(4px)}
@media(max-width:940px){
  /* una sub alta: nu mai e nimic de aliniat intre carduri, deci fiecare card
     isi tine singur randurile si nota nu mai are nevoie de randul flexibil */
  .categorii{grid-template-columns:1fr;grid-template-rows:none;
    row-gap:clamp(16px,2.2vw,24px);max-width:560px;margin-inline:auto}
  .cat{grid-template-rows:auto auto auto auto auto auto auto;grid-row:auto}
  .cat .cat-nota{margin-bottom:0}
}

/* Cele doua trasee nu se mai compara intr-un bloc separat sub carduri: acolo
   numele si preturile se repetau la 300 de pixeli distanta, iar pagina parea
   neclara. Informatiile care ajuta la ales, "Cum incepe" si "Pentru cine", stau
   acum in card, sub descriere; cele care spun cum lucrez, "Cum se construieste"
   si "Ce se foloseste", stau la un clic, in pop-upul cardului.

   Eticheta mica peste valoare, ca in fisele de dinainte: litera obisnuita, corp
   mic, culoare secundara. Nu majuscule spatiate, erau greu de citit. */
#continut .plan .pl-et{font-size:13px;line-height:1.35;color:var(--tx-38);
  margin-top:clamp(16px,1.8vw,20px)}
#continut .plan .pl-v{font-size:16px;line-height:1.5;color:var(--tx);margin-top:3px;
  max-width:34ch;margin-inline:auto}

/* Peste 940 cele doua carduri stau alaturi si isi imprumuta randurile prin
   subgrid, ca sa cada "Cum incepe" din stanga la aceeasi inaltime cu "Cum
   incepe" din dreapta, chiar daca o valoare intra pe doua randuri si cealalta
   pe unul. Fiecare copil isi cere randul explicit, altfel perechile s-ar aseza
   dupa cate randuri ocupa fiecare. Gap-ul de pe .plans.two e si pe randuri, iar
   in subgrid s-ar adauga intre fiecare pereche, deci se taie: distantele raman
   date de marginile elementelor. Sub 940 cardurile trec unul sub altul, nu mai
   e nimic de aliniat, deci ramane flexul obisnuit. */
@media(min-width:941px){
  .plans.two{grid-template-rows:repeat(8,auto);row-gap:0}
  .plans.two .plan{display:grid;grid-template-rows:subgrid;grid-row:span 8;
    row-gap:0;align-items:start}
  .plans.two .plan h3{grid-row:1}
  .plans.two .plan .amt{grid-row:2}
  .plans.two .plan .who{grid-row:3}
  .plans.two .plan .p1{grid-row:4}  .plans.two .plan .w1{grid-row:5}
  .plans.two .plan .p2{grid-row:6}  .plans.two .plan .w2{grid-row:7}
  .plans.two .plan .foot{grid-row:8;align-self:end}
}

/* Sectiunea de traseu din pop-up: sta prima, inaintea informatiilor generale
   despre plata si anulare, si e specifica cardului din care s-a deschis.
   Fondul crem2 o desparte de lista de dedesubt fara sa arate a card. */
.traseu{background:var(--cream2);border-radius:14px;
  padding:clamp(20px,2.2vw,26px);margin-bottom:clamp(24px,2.8vw,30px)}
.traseu h3{font-size:clamp(18px,1.6vw,20px);line-height:1.2;margin:0;color:var(--tx)}
.traseu-et{font-size:13px;line-height:1.35;color:var(--tx-38);margin-top:clamp(16px,1.8vw,20px)}
.traseu-v{font-size:16px;line-height:1.5;color:var(--tx);margin-top:3px}

/* link mic, in text: nu e buton de actiune, e o usa catre o explicatie */
.ca-link{appearance:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--wine);border-bottom:1px solid rgba(135,43,72,.35);line-height:1.3}
.ca-link:hover{border-bottom-color:var(--wine)}
.ca-link:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:2px}
#continut .plan .foot-mic{margin:14px 0 0;font-size:14.5px;text-align:center;width:100%}

/* Pop-up. dialog nu are display propriu cat e inchis, deci flexul se pune doar
   pe [open], altfel cutia s-ar vedea si inchisa. Elementul umple ecranul si
   prinde clicul din afara; continutul sta in .modal-in. */
.modal{border:0;padding:0;background:none;max-width:none;max-height:none;
  width:100%;height:100%;overflow:auto}
.modal[open]{display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,4vw,48px)}
.modal::backdrop{background:rgba(46,27,35,.62);backdrop-filter:blur(3px)}
/* tot ce e in pop-up se centreaza: titlul, eticheta si textul. Padding egal pe
   ambele laturi la titlu, altfel doar cel din dreapta, pus ca sa ocoleasca
   butonul de inchidere, ar impinge randul centrat spre stanga. */
.modal-in{position:relative;background:var(--cream);border-radius:18px;
  padding:clamp(30px,3.4vw,46px) clamp(24px,3vw,44px) clamp(30px,3.4vw,42px);
  width:100%;max-width:620px;text-align:center;
  box-shadow:0 30px 80px -30px rgba(46,27,35,.55)}
.modal-in h2{font-size:clamp(23px,2.3vw,29px);margin:0 0 clamp(20px,2.4vw,26px);
  padding-inline:44px;text-align:center}
.modal-in .stiu{margin-top:0;text-align:center}
.modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(46,27,35,.14);border-radius:50%;background:#fff;
  color:var(--tx-60);cursor:pointer;transition:.2s}
.modal-x:hover{border-color:var(--sand);color:var(--tx)}
.modal-x:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){
  .modal[open]{animation:modal-vine .22s ease}
}
@keyframes modal-vine{from{opacity:0}to{opacity:1}}

/* Cele doua pachete, sub punte. Aceeasi latime cu fisele, 940px, ca sa se
   citeasca in aceeasi coloana de continut. Fara selector de marime: un pachet
   per tip de sedinta, patru sedinte, atat. */
.pachete{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,24px);
  max-width:940px;margin:clamp(34px,4vw,46px) auto 0;align-items:stretch}
@media(max-width:779px){.pachete{grid-template-columns:1fr}}
.pach{background:#fff;border:1px solid rgba(46,27,35,.09);border-radius:18px;
  padding:clamp(26px,2.6vw,34px);display:flex;flex-direction:column;text-align:center;
  box-shadow:0 1px 2px rgba(46,27,35,.04),0 8px 24px -18px rgba(46,27,35,.22);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.pach:hover{transform:translateY(-3px);border-color:rgba(200,164,115,.6);
  box-shadow:0 2px 4px rgba(46,27,35,.05),0 18px 40px -22px rgba(46,27,35,.34)}
.pach h3{font-size:clamp(19px,1.7vw,22px);line-height:1.25;margin:0}
/* pretul intreg taiat sta inaintea celui de pachet, ca economia sa se vada
   dintr-o privire, nu doar sa fie declarata dedesubt */
#continut .pach-pret{margin:16px 0 0;line-height:1.2}
.pach-pret s{display:block;font-size:16px;color:var(--tx-38);text-decoration-thickness:1px}
.pach-pret b{display:block;font-size:clamp(28px,2.8vw,34px);font-weight:200;
  letter-spacing:-.03em;color:var(--tx);margin-top:4px}
.pach-pret small{display:block;font-size:14px;color:var(--wine);margin-top:7px}
#continut .pach-t{margin:18px auto 0;max-width:32ch;font-size:16px;line-height:1.5;color:var(--tx-60)}
.pach .foot{margin-top:auto;padding-top:26px;width:100%}
.pach .foot .b{width:100%;justify-content:center}

/* Ce trebuie sa stii: patru lucruri, deci lista, nu acordeon. Eticheta ingrosata
   sta pe randul ei, ca ochiul sa gaseasca repede subiectul cautat. */
.stiu-t{margin-top:clamp(40px,4.6vw,58px)}
.stiu{list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;text-align:left;
  max-width:660px;margin-inline:auto}
.stiu li{padding:18px 0;border-top:1px solid rgba(46,27,35,.12);
  font-size:16.5px;line-height:1.55;color:var(--tx-60)}
.stiu li b{display:block;font-weight:500;color:var(--tx);margin-bottom:5px;font-size:16px}
.stiu a.in-text{color:var(--wine);border-bottom:1px solid rgba(135,43,72,.35)}
.stiu a.in-text:hover{border-bottom-color:var(--wine)}
#continut .artcta p{margin:0 0 22px}
#continut .artcta .act{margin-top:0}

/* practici: cardurile se scaneaza din ochi, nu se citesc */
.ex .sub-mic{font-size:13px;letter-spacing:.02em;color:var(--tx-38);margin:8px 0 0;line-height:1.35}
.ex .sub-mic+p{margin-top:10px}
#practici .ex p{font-size:16px;line-height:1.45;max-width:26ch}

/* a saptea, set de tehnici ajutatoare, nu practica de sine statatoare */
.lat{margin-top:clamp(16px,2.2vw,24px);border-top:1px solid var(--sand);padding-top:clamp(22px,2.6vw,30px);text-align:center}
.lat h3{font-size:clamp(20px,1.9vw,24px);margin:0 0 14px}
/* o singura coloana: pe doua, fiecare paragraf era centrat in coloana lui,
   iar ansamblul citea ca doua blocuri alaturate, nu ca un text centrat.
   Masura sta pe paragraf, unde font-size e 16px, ca sa fie ch-ul corect;
   pe container ch s-ar raporta la cei 19px mosteniti din body. */
.lat .doua{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.4vw,16px)}
.lat .doua p{margin:0 auto;max-width:60ch;font-size:16px;line-height:1.55;color:var(--tx-60)}


/* fotografie alaturata continutului, nu banda si nu fundal */
.in.wide{max-width:1120px}
.duo{display:grid;gap:clamp(20px,2.6vw,34px);margin-top:clamp(30px,3.6vw,42px);text-align:left}
.duo-foto{position:relative;border-radius:18px;background-size:cover;background-repeat:no-repeat;background-position:center}
.three.stiva{grid-template-columns:1fr;gap:clamp(12px,1.6vw,18px);margin-top:0}
/* cutiile din Metoda se citesc centrat, ca restul cardurilor din pagina.
   Textul isi tine masura si sta pe axa, ca sa nu ajunga la marginile cutiei.
   Titlul ramane nelimitat, incape oricum pe un rand la latimea coloanei. */
.three.stiva>div{text-align:center}
.three.stiva p{margin:12px auto 0;max-width:46ch}

#how .duo{grid-template-columns:1.14fr .86fr;align-items:stretch}
/* decupajul e facut in fisier, cadrul e deja incadrat pe subiect, deci
   fotografia sta centrata: mosteneste background-position:center de pe .duo-foto */
#how .duo-foto{background-image:url("sedinta.jpg");min-height:440px}

/* practicile: doua familii de tehnici pe cele doua coloane, legate de un liant
   desenat in centru. Fotografia a plecat de aici pe pagina Cercetare: o coloana
   de 0,8 din latimea uneia laterale, intinsa pe trei carduri, iese la raport 0,32
   si ar fi taiat 60% din latimea oricarei fotografii. */
#practici .trio{display:grid;grid-template-columns:1fr .8fr 1fr;gap:clamp(20px,2.6vw,34px);align-items:stretch;margin-top:clamp(30px,3.6vw,42px);text-align:center}
#practici .col-ex{display:grid;grid-template-rows:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}

/* axul e CSS pe procente, ca sa nu se deformeze grosimea liniei la nicio inaltime
   de coloana. SVG doar pentru noduri. Doua fire la 4px, ca tijele diapazonului. */
#practici .liant{position:relative;color:var(--sand);--sant:clamp(20px,2.6vw,34px)}
#practici .liant .ax{position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(200,164,115,0) 0%,rgba(200,164,115,.6) 10%,rgba(200,164,115,.6) 90%,rgba(200,164,115,0) 100%)}
#practici .liant .ax:nth-of-type(1){left:calc(50% - 2.5px)}
#practici .liant .ax:nth-of-type(2){left:calc(50% + 1.5px)}
/* ramurile trec peste santuri, ca punctele sa cada chiar pe marginea cardurilor */
#practici .liant .nod{position:absolute;left:calc(-1 * var(--sant));width:calc(100% + 2 * var(--sant));height:auto;transform:translateY(-50%);overflow:visible}
/* centrul fiecarui card, la randuri egale. Se misca sub 0,3% intre 250 si 350px inaltime de card. */
#practici .liant .n1{top:15.8%}
#practici .liant .n2{top:50%}
#practici .liant .n3{top:84.2%}

/* Punctele isi tin opacitatea din CSS, ca sa fie un singur loc de reglat.
   Fara animatie, adica si la prefers-reduced-motion, raman la maxim. */
#practici .liant .pct{opacity:1}

/* Respiratia: axul, nodul central si punctele urca si coboara impreuna, iar
   pulsul ajunge la puncte cu intarziere, dinspre centru spre exterior.
   Perechea din dreptul cardului din mijloc e cea mai apropiata de hub, deci
   porneste prima; perechile de sus si de jos sunt la distanta egala, deci
   pleaca impreuna, altfel unda ar citi ca o baleiere, nu ca un cerc.
   Ciclu de 5s, continuu, cat o respiratie linistita.
   Axul respira odata cu nodul: fara el, punctele par ca palpaie independent
   de structura. Doar opacity si transform, nimic care sa ceara recalcul. */
@keyframes liant-ax{
  0%,100%{opacity:.5}
  50%{opacity:1}
}
@keyframes liant-puls{
  0%,100%{opacity:var(--o-jos);transform:scale(1)}
  50%{opacity:var(--o-sus);transform:scale(var(--sc))}
}
@media(prefers-reduced-motion:no-preference){
  #practici .liant .ax{animation:liant-ax 5s ease-in-out infinite}
  #practici .liant .hub,#practici .liant .pct{
    transform-box:fill-box;transform-origin:center;
    animation:liant-puls 5s ease-in-out infinite}
  #practici .liant .hub{--o-jos:.6;--o-sus:1;--sc:1.12}
  /* punctele au 6px in markup; la 4,4px si 25% cresterea era de un pixel, deci
     invizibila. Varful de 9,6px ramane sub inelul de 12px al nodurilor de sus
     si de jos, ca sa nu se inverseze ierarhia dintre nod si capatul ramurii. */
  #practici .liant .pct{--o-jos:.12;--o-sus:1;--sc:1.6}
  #practici .liant .n2 .pct{animation-delay:.3s}
  #practici .liant .n1 .pct,#practici .liant .n3 .pct{animation-delay:.6s}
}

/* aici fotografia trece in dreapta, ca sa nu iasa doua sectiuni la rand cu ea pe aceeasi parte */

@media(max-width:1080px){
  .duo,#how .duo{grid-template-columns:1fr}
  .duo-foto,#how .duo-foto{order:-1;position:relative;top:auto;aspect-ratio:auto;height:340px;min-height:0}
  /* sub 1080 fotografia devine banda lata, iar cadrul ei nu mai are nimic de-a
     face cu raportul fisierului: la 2,5:1 centrarea taie capul. Se ridica. */
  /* sedinta.jpg pe banda de sub 620: chipul lui Teo e la y=120..290 din 1250,
     mainile pe cap la 795..860. 14% tine chipul intreg la toate latimile, iar
     pe ecranele mai inguste, unde fereastra creste, intra si mainile. */
  #how .duo-foto{background-position:center 14%}
     Centrat ar arata doar pielea tobei, fara chip si fara maini. */
  /* trei coloane devin doua. Liantul nu mai leaga nimic pe orizontala,
     deci ramane doar axul culcat, cu nodul din mijloc, ca separator. */
  #practici .trio{grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,24px)}
  #practici .col-ex{display:contents}
  #practici .liant{order:-1;grid-column:1/-1;height:56px}
  #practici .liant .ax:nth-of-type(2){display:none}
  #practici .liant .ax:nth-of-type(1){top:50%;bottom:auto;left:0;right:0;width:auto;height:1px;transform:translateY(-.5px);
    background:linear-gradient(90deg,rgba(200,164,115,0) 0%,rgba(200,164,115,.6) 22%,rgba(200,164,115,.6) 78%,rgba(200,164,115,0) 100%)}
  #practici .liant .n1,#practici .liant .n3{display:none}
  #practici .liant .ram{display:none}
  #practici .liant .n2{top:50%;left:50%;width:230px;transform:translate(-50%,-50%)}
}


/* linkuri in corpul articolului, subliniere discreta, fara alta culoare de text */
#continut a:not(.b):not(.back){border-bottom:1px solid rgba(200,164,115,.7);transition:color .2s,border-color .2s}
#continut a:not(.b):not(.back):hover{color:var(--wine);border-bottom-color:var(--wine)}

/* multumiri si referinte, la finalul articolului */
.multumiri{margin-top:clamp(34px,4vw,46px);padding-top:clamp(20px,2.4vw,26px);border-top:1px solid rgba(46,27,35,.12)}
.multumiri h3{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--tx-38);margin:0 0 12px}
#continut .multumiri p{font-size:15.5px;line-height:1.6;color:var(--tx-60);margin:0}
.multumiri ul{list-style:none;margin:0;padding:0}
.multumiri li{position:relative;padding-left:18px;margin:0 0 10px;font-size:15.5px;line-height:1.5;color:var(--tx-60)}
.multumiri li:last-child{margin-bottom:0}
.multumiri li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--sand)}


/* file de colectie, deasupra filtrelor de categorie */
.file{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,34px)}
.file button{border:1px solid rgba(46,27,35,.16);background:#fff;font-family:var(--f);font-size:clamp(15px,1.5vw,17px);font-weight:300;color:var(--tx-60);padding:15px 30px;border-radius:100px;cursor:pointer;transition:.2s;letter-spacing:-.01em}
.file button:hover{border-color:var(--sand)}
.file button[aria-selected="true"]{border-color:var(--wine);background:var(--wine);color:#fff;font-weight:400}
.file button:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.filters[hidden]{display:none}

/* scrisorile arata altfel decat articolele, fara coperta si mai scunde */
.post.scrisoare{border-color:rgba(200,164,115,.5)}
.post.scrisoare .bd{padding:clamp(22px,2.2vw,28px)}
.post.scrisoare .dt{color:var(--wine);letter-spacing:.16em}
.post.scrisoare h3{font-size:19.5px}

/* colectie fara continut */
.gol{text-align:center;margin-top:clamp(30px,3.6vw,44px)}
.gol>p{font-size:clamp(18px,1.8vw,21px);font-weight:300;color:var(--tx-60);max-width:34ch;margin:0 auto clamp(24px,3vw,32px)}
.gol [data-abonare][hidden]{display:none}

/* formularul de abonare */
.abonare{max-width:540px;margin:clamp(30px,3.6vw,42px) auto 0;text-align:left;background:#fff;border:1px solid rgba(46,27,35,.09);border-radius:18px;padding:clamp(24px,2.6vw,32px);box-shadow:0 1px 2px rgba(46,27,35,.04),0 8px 24px -18px rgba(46,27,35,.22)}
.abonare .ab-t{margin:0 0 16px;font-size:16px;line-height:1.55;color:var(--tx-60)}
.abonare .ab-t b{display:block;margin-bottom:5px;font-weight:400;color:var(--tx)}
.ab-rand{display:flex;gap:8px}
.ab-rand input{flex:1;min-width:0;font-family:var(--f);font-size:16px;font-weight:300;color:var(--tx);border:1px solid rgba(46,27,35,.16);border-radius:12px;padding:14px 16px;background:#fff}
.ab-rand input::placeholder{color:var(--tx-38)}
.ab-rand input:focus{outline:0;border-color:var(--sand)}
.ab-rand input:disabled{opacity:.55}
.ab-rand .b{padding:14px 24px;font-size:15px;white-space:nowrap;flex:none}
/* cat timp acordul nu e bifat, butonul e inactiv si arata inactiv */
.ab-rand .b:disabled{opacity:.45;cursor:default;background:var(--wine);border-color:var(--wine)}
.ab-acord{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:14px;line-height:1.45;color:var(--tx-60);cursor:pointer}
.ab-acord input{margin:2px 0 0;accent-color:var(--wine);width:16px;height:16px;flex:none}
.ab-acord a{border-bottom:1px solid rgba(200,164,115,.7)}
.ab-mic{margin:10px 0 0;font-size:13px;color:var(--tx-38)}
.ab-stare{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--tx-60)}
.ab-stare.bine{color:var(--wine)}
.ab-stare.rau{color:#9B2C2C}
.ab-stare[hidden]{display:none}

/* varianta din subsol, pe fundal inchis */
footer .abonare{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);box-shadow:none;margin-top:clamp(28px,3.4vw,38px)}
footer .abonare .ab-t{color:rgba(255,255,255,.72)}
footer .abonare .ab-t b{color:#fff}
footer .abonare .ab-rand input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
footer .abonare .ab-rand input::placeholder{color:rgba(255,255,255,.45)}
footer .abonare .ab-acord{color:rgba(255,255,255,.62)}
footer .abonare .ab-mic{color:rgba(255,255,255,.38)}
footer .abonare .ab-stare{color:rgba(255,255,255,.72)}
footer .abonare .ab-stare.bine{color:var(--sand)}
footer .abonare .ab-stare.rau{color:#F0A9A9}

/* pagina cu cercetarea */
.cerc{margin-top:clamp(34px,4vw,48px)}
.cerc h2{margin-top:0}
.cerc .desch{font-size:clamp(18px,1.8vw,20.5px);line-height:1.55;color:var(--tx);margin:0 0 16px;font-weight:300}
.surse{margin-top:clamp(20px,2.4vw,26px);padding-top:clamp(16px,2vw,20px);border-top:1px solid rgba(46,27,35,.12)}
.surse-t{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--tx-38);margin:0 0 12px}
.surse ul{list-style:none;margin:0;padding:0}
.surse li{position:relative;padding-left:18px;margin:0 0 9px;font-size:14.5px;line-height:1.5;color:var(--tx-38)}
.surse li:last-child{margin-bottom:0}
.surse li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--sand)}
.precizare{margin-top:clamp(20px,2.4vw,28px);border:1px solid rgba(200,164,115,.55);background:rgba(200,164,115,.08);border-radius:14px;padding:clamp(18px,2vw,24px)}
#continut .precizare p{margin:0;font-size:15.5px;line-height:1.6;color:var(--tx-60)}
.incheiere{margin-top:clamp(40px,4.6vw,58px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid rgba(46,27,35,.12)}
#continut .incheiere p{margin:0;font-size:15px;line-height:1.6;color:var(--tx-38)}

/* randul discret din Metoda si linkul din cardul MTC */
.spre-cerc{margin:clamp(22px,2.8vw,30px) auto 0;font-size:15.5px;color:rgba(255,255,255,.6)}
.spre-cerc a{border-bottom:1px solid rgba(200,164,115,.7);color:rgba(255,255,255,.86)}
.spre-cerc a:hover{color:#fff;border-bottom-color:#fff}
.ex .mic-link{margin-top:auto;padding-top:14px;font-size:13.5px}
.ex .mic-link a{color:var(--wine);border-bottom:1px solid rgba(135,43,72,.3)}
.ex .mic-link a:hover{border-bottom-color:var(--wine)}





/* asezare pe telefon */
@media(max-width:620px){
  section{padding-inline:20px}
  /* cardul devine linie de lista: coperta patrata in stanga, text in dreapta.
     Rezumatul dispare, nu incape si nu ajuta. Textul se aliniaza la stanga:
     centrarea are sens doar cand blocul e vertical si simetric. */
  .posts{text-align:left}
  .post{display:grid;grid-template-columns:96px 1fr;align-items:center;
    gap:14px;padding:12px}
  .post>a{display:block;line-height:0}
  .post .ph{aspect-ratio:1;width:96px;border-radius:12px}
  .post .bd{padding:0;display:block}
  .post p{display:none}
  /* categoria si data trebuie sa incapa pe un rand: daca se rup in doua,
     cardul creste peste inaltimea copertei si linia de lista devine inegala */
  /* si aici doua randuri fixe, ca liniile de lista sa fie egale */
  .post .dt{margin-bottom:6px;font-size:10.5px;letter-spacing:.06em;line-height:1.3;min-height:2.6em}
  .post h3{font-size:17px;margin:0 0 6px}
  .post .rd{margin-top:0;padding-top:0;font-size:14px}
  /* scrisorile nu au coperta, deci raman pe o coloana */
  .post.scrisoare{grid-template-columns:1fr;padding:22px 18px}
  .post.scrisoare .bd{padding:0}
  h1{font-size:clamp(30px,8.6vw,44px)}
  h2{font-size:clamp(26px,7.4vw,36px)}
  .sub{font-size:17.5px;max-width:none}
  body{font-size:17.5px}
  .act{flex-direction:column;align-items:stretch}
  .act .b{width:100%}
  #hero{padding-top:104px;padding-bottom:52px}
  .hero-meta,.trust{gap:8px 16px;font-size:13px}
  .plan,.ex,.rev{padding:28px 22px}
  .plan .amt{font-size:30px}
  .quote,.said{font-size:24px;max-width:none}
  .face{width:min(220px,62vw)}
  .three>div{padding:28px 22px}
  .loc{gap:12px}
  .mapwrap,.mapwrap iframe{min-height:0;height:210px}
  .info{padding:22px 20px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-content:start}
  .info .row{padding:14px 0;border-bottom:1px solid rgba(46,27,35,.09)}
  .info .row:nth-child(1),.info .row:nth-child(2){padding-top:0}
  .info .row:nth-last-of-type(1){grid-column:1/-1;border-bottom:0}
  .info dt{font-size:10.5px;letter-spacing:.18em;margin-bottom:5px}
  .info dd{font-size:15.5px;line-height:1.4}
  .info dd small{font-size:13.5px;margin-top:3px}
  .info .wa{grid-column:1/-1;margin-top:16px}
  .pane{padding:22px 18px}
  .dayrow{grid-template-columns:repeat(2,1fr)}
  .fields{grid-template-columns:1fr}
  .final{min-height:70svh;padding-block:70px}
  .foot-links,.legal{gap:10px 18px;font-size:14px}
  .duo-foto,#how .duo-foto{height:280px}
  #practici .trio{grid-template-columns:1fr}
  .formari ul{columns:1}
  #practici .ex p{max-width:none}
  .ab-rand{flex-direction:column}
  .ab-rand .b{width:100%}
  .file button{padding:13px 20px;font-size:15px}
  /* pe telefon zona e mai inalta ca latimea, deci cover taie mult din laterale.
     Cadrul se muta spre stanga, ca bolul sa ramana intreg. */
  .plans,.plans.two,.plans.one,.extras,.extras.two,.extras.one,.three,.revs{grid-template-columns:1fr}
}
@media(max-width:420px){
  .info{grid-template-columns:1fr}
  .info .row:nth-child(2){padding-top:14px}
  .info .row{border-bottom:1px solid rgba(46,27,35,.09)}
}
@media(max-width:400px){
  .dayrow{grid-template-columns:1fr}
  h1{font-size:30px}
}

/* Banda din Metoda, intre 620 si 1080. Fisierul de aici e altul: sedinta-lat.jpg,
   1600x640, decupat din aceeasi sedinta foto pentru 2,5:1, cu mainile pe cap,
   chipul clientei si bolul. Un cadru 4:5 comprimat pe o banda nu functioneaza.
   Raportul e fixat la 2.5 in loc de inaltime fixa: asa coincide exact cu sursa
   si decupajul e zero la orice latime din interval.
   Regula sta dupa pragurile de 1080 si 620 fiindca are aceeasi specificitate
   cu ele si trebuie sa castige prin ordine. Sub 620 si peste 1080 ramane
   sedinta.jpg, cu regulile lui. */
@media(min-width:620px) and (max-width:1080px){
  #how .duo-foto{background-image:url("sedinta-lat.jpg");background-position:center;
    height:auto;aspect-ratio:2.5}
}