/* ═══════════════════════════════════════════════════════════
   Poarta Sufletului — Kaya Retreats
   Paleta Kaya: forest #0E4A36 · cream #E8DFC9 · gold #C9A961
   ═══════════════════════════════════════════════════════════ */

:root{
  --forest:      #0E4A36;
  --forest-dark: #0A3527;
  --forest-deep: #072318;
  --forest-light:#16664B;
  --cream:       #E8DFC9;
  --cream-soft:  #F4EFE2;
  --gold:        #C9A961;
  --gold-dark:   #8A6F25;
  --bg-muted:    #F7F5EF;
  --border:      #E0DACB;
  --ink:         #0E4A36;
  --ink-soft:    #5A6760;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --sec-y: clamp(4.5rem, 9vw, 8.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg-muted);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--forest); color:var(--cream); padding:.75rem 1.25rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ── layout ───────────────────────────────────────────── */
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:820px; }

.sec{ padding-block:var(--sec-y); position:relative; }
.sec--cream{ background:var(--cream-soft); }
.sec--band { background:var(--bg-muted); }
.sec--forest{ background:var(--forest); color:var(--cream); }
.sec--forest::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(201,169,97,.13), transparent 62%),
    radial-gradient(900px 460px at 92% 108%, rgba(22,102,75,.55), transparent 66%);
}
.sec--forest > *{ position:relative; z-index:1; }

/* ── tipografie comună ────────────────────────────────── */
.eyebrow{
  margin:0 0 1rem;
  font-size:.6875rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-dark);
}
.eyebrow--gold{ color:var(--gold); }
.eyebrow::after{
  content:''; display:block; width:34px; height:1px; margin-top:.9rem;
  background:currentColor; opacity:.55;
}

.h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem, 1.4rem + 2.6vw, 3.35rem);
  line-height:1.13; letter-spacing:-.01em;
  margin:0 0 1.5rem; color:var(--forest);
}
.h2--light{ color:var(--cream); }
.h2 em{ font-style:italic; }

.sechead{ max-width:44rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sechead--tight{ margin-bottom:2rem; }

.quote{
  margin:2rem 0; padding:0 0 0 1.5rem;
  border-left:2px solid var(--gold);
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); line-height:1.45;
  color:var(--forest);
}

.muted{ color:var(--ink-soft); font-size:.9em; }

/* ── butoane ──────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1.05rem 2.4rem; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:.8125rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn--gold{
  background:linear-gradient(135deg,#DCBE78,var(--gold) 45%,#A9873F);
  color:#25200E;
  box-shadow:0 12px 32px -14px rgba(201,169,97,.85);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(201,169,97,.95); }
/* Două căi din hero: rezervarea și programul. Pe telefon stau una sub alta,
   cu rezervarea deasupra — ea e drumul principal. */
.hero__cta{
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center;
}
.hero__cta .btn{ flex:0 1 auto; }
@media (max-width:30rem){
  .hero__cta{ flex-direction:column; align-items:stretch; width:min(100%,22rem); }
}

.btn--ghost{
  background:transparent; color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(232,223,201,.4);
}
.btn--ghost:hover{ background:rgba(232,223,201,.1); transform:translateY(-2px); }
.btn--sm{ padding:.85rem 1.75rem; font-size:.75rem; }
.btn--wide{ width:100%; }
.btn:active{ transform:translateY(0) scale(.99); }

/* ═══════════ 1. HERO ═══════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column;
  color:var(--cream); overflow:hidden;
  padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(3rem,6vw,5rem);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
/* Poza, puțin mai luminoasă — cerut de Ștefania. ⚠️ Atenție: asta lucrează
   ÎMPOTRIVA lizibilității textului de deasupra, care trebuia și el îmbunătățit.
   De aceea nu am slăbit vălul peste toată poza, ci l-am strâns SUB text
   (`.hero__body::before`): poza se vede mai deschisă, iar literele stau pe
   ceva închis doar acolo unde au nevoie. */
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(1.14) saturate(1.04) contrast(.98);
}
/* Poza trebuie SĂ SE VADĂ — poarta, focul, apusul. Întunecăm doar cât
   să se citească textul: o pată moale sub titlu, o trecere ușoară pe
   verticală și o umbrire discretă pe margini. Restul rămâne curat. */
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(64% 34% at 50% 30%, rgba(10,22,17,.34) 0%, rgba(10,22,17,.12) 64%, transparent 100%),
    linear-gradient(180deg, rgba(14,18,14,.30) 0%, rgba(14,18,14,.06) 40%, rgba(9,30,21,.08) 66%, rgba(7,35,24,.74) 100%),
    radial-gradient(135% 100% at 50% 40%, transparent 54%, rgba(7,35,24,.28) 100%);
}

.hero__bar{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding-inline:var(--pad);
}
.tag{
  font-size:.625rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(232,223,201,.82);
  padding:.5rem .95rem; border:1px solid rgba(232,223,201,.28); border-radius:999px;
  backdrop-filter:blur(6px);
}

/* Textul stă în jumătatea de sus, ca poarta și focul din poză să rămână
   libere dedesubt. Padding-ul de jos e cel care îl împinge în sus. */
/* ⚠️ Cele două cereri se bat cap în cap: poză mai luminoasă ȘI text mai
   vizibil. Dacă întunec toată poza, pierd lumina; dacă o luminez, pierd
   textul. Leacul: un fundal închis STRÂNS SUB BLOCUL DE TEXT, nu peste
   imagine. Poza rămâne deschisă, literele stau pe ceva închis doar acolo
   unde au nevoie — și marginea se stinge lin, ca să nu se vadă o cutie. */
.hero__body::before{
  content:""; position:absolute; z-index:-1;
  left:50%; translate:-50% 0;
  top:clamp(1rem,4vh,3rem); bottom:clamp(2rem,12vh,8rem);
  width:min(92%, 58rem);
  background:radial-gradient(60% 50% at 50% 46%,
    rgba(6,18,13,.62) 0%, rgba(6,18,13,.44) 46%,
    rgba(6,18,13,.18) 74%, transparent 100%);
  filter:blur(6px);
  pointer-events:none;
}

.hero__body{
  position:relative; z-index:2;
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:clamp(1.5rem,4vw,2.5rem) var(--pad) clamp(3rem,17vh,12rem);
  max-width:60rem; margin-inline:auto;
}
@media (max-height:700px){
  .hero__body{ padding-bottom:clamp(1rem,6vh,3rem); }
}
/* Pe telefon poza se taie îngust: rămâne mai ales banda portocalie a
   apusului, pe care auriul nu se mai citește. Acolo întunecăm mai tare —
   oricum din poartă nu se mai vede mare lucru la lățimea aia. */
@media (max-width:699px){
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(12,20,16,.66) 0%, rgba(12,20,16,.44) 30%,
                              rgba(10,30,22,.50) 64%, rgba(7,35,24,.88) 100%);
  }
  .hero__body{ padding-bottom:clamp(1.5rem,7vh,4rem); }
  .facts{ margin-block:clamp(1.5rem,4vw,2rem); }
  .facts li{ padding-block:.55rem; }
}
.hero__date{
  display:flex; align-items:center; gap:1rem; margin:0 0 1.25rem;
  font-size:.75rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 2px 14px rgba(7,35,24,.9);
}
.rule{ display:block; width:clamp(24px,6vw,52px); height:1px; background:currentColor; opacity:.6; }

.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3rem, 1.6rem + 7.2vw, 7.5rem);
  line-height:.98; letter-spacing:-.02em;
  margin:0 0 1.25rem;
  text-shadow:0 2px 6px rgba(4,14,10,.55), 0 6px 40px rgba(0,0,0,.45);
}
.hero__lead{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,1rem + .8vw,1.65rem); line-height:1.4;
  margin:0 auto 1.5rem; max-width:47rem; color:var(--cream);
  text-shadow:0 2px 20px rgba(7,35,24,.8);
}
.hero__sub{
  margin:0 auto; max-width:44rem;
  font-size:clamp(.95rem,.9rem + .25vw,1.0625rem); line-height:1.8;
  color:rgba(240,233,214,.94);
  text-shadow:0 1px 3px rgba(4,14,10,.8), 0 2px 18px rgba(7,35,24,.9);
}

.facts{
  list-style:none; margin:clamp(2rem,4vw,3rem) 0 clamp(2rem,4vw,2.75rem); padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0;
}
.facts li{
  padding:.25rem clamp(1rem,3vw,2.25rem);
  display:flex; flex-direction:column; gap:.35rem; align-items:center;
}
.facts li + li{ border-top:1px solid rgba(232,223,201,.22); }
@media (min-width:620px){
  .facts li + li{ border-top:0; border-left:1px solid rgba(232,223,201,.22); }
}
@media (max-width:619px){
  .facts{ flex-direction:column; }
  .facts li{ padding-block:.7rem; }
}
.facts__k{ font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.facts__v{ font-family:var(--serif); font-size:clamp(1rem,.95rem + .3vw,1.2rem); color:var(--cream); }

.hero__scroll{
  position:relative; z-index:2; display:flex; justify-content:center;
}
.hero__scroll span{
  display:block; width:1px; height:52px;
  background:linear-gradient(180deg, transparent, rgba(232,223,201,.7));
  animation:drop 2.6s ease-in-out infinite;
}
@keyframes drop{ 0%,100%{ transform:scaleY(.45); opacity:.35 } 50%{ transform:scaleY(1); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .hero__scroll span{ animation:none } }

/* ═══════════ split (de ce acum / kit) ═══════════ */
.wrap--split{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){
  .wrap--split{ grid-template-columns:1.05fr .95fr; }
  .wrap--split-narrow{ grid-template-columns:.9fr 1.1fr; }
}
.split__text p{ margin:0 0 1.15rem; }
.split__img{ margin:0; }
.split__img img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:2px;
  box-shadow:0 30px 60px -32px rgba(14,74,54,.55);
}
@media (min-width:900px){
  .split__img--first{ order:-1; }
}

.kit{ list-style:none; margin:1.5rem 0 0; padding:0; }
.kit li{
  position:relative; padding:.7rem 0 .7rem 1.9rem;
  border-bottom:1px solid var(--border);
  font-size:.9375rem;
}
.kit li:last-child{ border-bottom:0; }
.kit li::before{
  content:''; position:absolute; left:.25rem; top:1.32rem;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}

/* ═══════════ 3. BENEFICII ═══════════ */
.benefits{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:rgba(232,223,201,.14);
  border-block:1px solid rgba(232,223,201,.14);
}
@media (min-width:700px){ .benefits{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .benefits{ grid-template-columns:repeat(3,1fr); } }

.ben{
  background:var(--forest);
  padding:clamp(1.75rem,3vw,2.4rem);
  transition:background .3s ease;
}
.ben:hover{ background:var(--forest-light); }
.ben__no{
  display:block; font-family:var(--serif); font-size:1.05rem;
  color:var(--gold); letter-spacing:.1em; margin-bottom:1rem;
}
.ben h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem); line-height:1.2;
  margin:0 0 .9rem; color:var(--cream);
}
.ben__t{
  display:block; margin-top:.35rem;
  font-family:var(--sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.ben p{ margin:0; font-size:.9375rem; line-height:1.75; color:rgba(232,223,201,.78); }

/* Poza care umple golul din ultimul rând (doar pe 3 coloane) */
.ben--foto{ display:none; }
@media (min-width:1100px){
  .ben--foto{
    display:block; position:relative; padding:0; overflow:hidden;
    grid-column:span 2; min-height:220px;
  }
}
.ben--foto:hover{ background:var(--forest); }
.ben--foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
}
/* îl coborâm în ton cu restul secțiunii, să nu sară din pagină */
.ben--foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,74,54,.42), rgba(10,53,39,.62));
}

/* ═══════════ 4. CE VEI EXPERIMENTA ═══════════ */
.exp{ display:flex; flex-direction:column; gap:clamp(3rem,6vw,5.5rem); margin-top:1rem; }
.exp__row{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:1fr; align-items:center;
  width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--pad);
}
@media (min-width:820px){
  .exp__row{ grid-template-columns:1fr 1fr; }
  .exp__row--flip .exp__img{ order:2; }
}
.exp__img{ margin:0; }
.exp__img img{
  width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:2px;
  box-shadow:0 30px 60px -34px rgba(14,74,54,.6);
}
.exp__no{
  display:block; font-family:var(--serif); font-size:2.4rem; font-weight:300;
  color:var(--gold); line-height:1; margin-bottom:.75rem; opacity:.85;
}
.exp__text h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1.25rem + 1vw,2.1rem); line-height:1.2;
  margin:0 0 1rem; color:var(--forest);
}
.exp__sub{
  display:block; margin-top:.5rem;
  font-family:var(--sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dark);
}
.exp__text p{ margin:0; color:var(--ink-soft); }

/* ═══════════ 5. PROGRAM ═══════════ */
/* Fără JavaScript butoanele n-ar face nimic, așa că le arătăm doar când
   scriptul e pornit; atunci zilele se pun în file. Fără JS, cele patru zile
   rămân una sub alta, fiecare cu numele ei. */
.days{ display:none; }
.js .days{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem;
  margin-bottom:clamp(2rem,4vw,2.75rem);
}
@media (min-width:760px){ .js .days{ grid-template-columns:repeat(4,1fr); gap:.75rem; } }

.panel + .panel{ margin-top:clamp(2.5rem,5vw,4rem); }
.js .panel + .panel{ margin-top:0; }
.panel__day{
  margin:0 0 .5rem;
  font-size:.6875rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.js .panel__day{ display:none; }
.day{
  appearance:none; cursor:pointer; text-align:left;
  background:transparent; color:rgba(232,223,201,.68);
  border:1px solid rgba(232,223,201,.2); border-radius:2px;
  padding:1rem 1.15rem;
  font-family:var(--sans);
  transition:all .25s ease;
}
.day:hover{ border-color:rgba(201,169,97,.55); color:var(--cream); }
.day.is-on{
  background:rgba(201,169,97,.14); border-color:var(--gold); color:var(--cream);
}
.day__d{ display:block; font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.day__n{ display:block; font-family:var(--serif); font-size:1.35rem; margin-top:.25rem; }

.panel__title{
  margin:0 0 1.75rem;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,1rem + .5vw,1.45rem);
  color:var(--gold);
}
.tl{ list-style:none; margin:0; padding:0; }
.tl li{
  display:grid; grid-template-columns:1fr; gap:.3rem;
  padding:1.1rem 0; border-top:1px solid rgba(232,223,201,.16);
}
.tl li:last-child{ border-bottom:1px solid rgba(232,223,201,.16); }
@media (min-width:620px){
  .tl li{ grid-template-columns:8.5rem 1fr; gap:1.5rem; align-items:baseline; }
}
.tl__t{
  font-size:.75rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.tl__b{ color:rgba(232,223,201,.82); font-size:.9375rem; line-height:1.7; }
.tl__b strong{ color:var(--cream); font-weight:500; }

.notes{
  list-style:none; margin:clamp(1.75rem,3vw,2.5rem) 0 0; padding:0;
  counter-reset:n;
  font-size:.8125rem; color:rgba(232,223,201,.6); line-height:1.7;
}
.notes li{ counter-increment:n; position:relative; padding-left:1.5rem; margin-bottom:.4rem; }
.notes li::before{
  content:'*'; position:absolute; left:0; color:var(--gold);
}
.notes li:nth-child(2)::before{ content:'**'; }
.notes li:nth-child(3)::before{ content:'***'; }

/* ═══════════ 7. DETALII PRACTICE ═══════════ */
.facts-grid{
  margin:0; display:grid; gap:1px;
  grid-template-columns:1fr; background:var(--border);
  border:1px solid var(--border);
}
@media (min-width:640px){ .facts-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .facts-grid{ grid-template-columns:repeat(3,1fr); } }
.facts-grid > div{ background:var(--bg-muted); padding:1.5rem 1.65rem; }
.facts-grid dt{
  font-size:.6875rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:.5rem;
}
.facts-grid dd{
  margin:0; font-family:var(--serif); font-size:1.25rem; line-height:1.4; color:var(--forest);
}

/* ═══════════ 8. PREȚURI ═══════════ */
.prices{
  display:grid; gap:1.25rem; grid-template-columns:1fr;
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:760px){ .prices{ grid-template-columns:repeat(2,1fr); } }
.price{
  padding:clamp(1.75rem,3.5vw,2.75rem);
  border:1px solid rgba(232,223,201,.22); border-radius:3px;
  background:rgba(7,35,24,.35);
  display:flex; flex-direction:column; align-items:flex-start;
}
.price--gold{
  border-color:rgba(201,169,97,.6);
  background:linear-gradient(160deg, rgba(201,169,97,.14), rgba(7,35,24,.4));
  box-shadow:0 24px 60px -34px rgba(201,169,97,.6);
}
.price__badge{
  font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#25200E; background:var(--gold); padding:.4rem .85rem; border-radius:999px;
}
.price__badge--plain{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(232,223,201,.35); }
.price__meta{
  margin:1.25rem 0 .5rem; font-size:.8125rem; color:rgba(232,223,201,.62);
  letter-spacing:.02em;
}
.price__amount{
  margin:0 0 .75rem;
  font-family:var(--serif); font-weight:300; font-size:clamp(3rem,2rem + 3.5vw,4.5rem);
  line-height:1; color:var(--cream);
}
.price__amount span{ font-size:.45em; margin-left:.15em; color:var(--gold); vertical-align:super; }
.price__note{ margin:0 0 1.75rem; font-size:.9375rem; color:rgba(232,223,201,.78); }
.price .btn{ margin-top:auto; }

.addon{
  border:1px solid rgba(232,223,201,.2); border-radius:3px;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:rgba(7,35,24,.25);
}
.addon__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 1rem; margin-bottom:1rem; }
.addon__head h3{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem,1.2rem + .5vw,1.7rem); color:var(--cream);
}
.addon__tag{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.addon > p{ margin:0 0 1.5rem; font-size:.9375rem; color:rgba(232,223,201,.78); max-width:44rem; }
.addon__prices{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.75rem; }
.addon__prices li{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.7rem 1.25rem; border:1px solid rgba(232,223,201,.22); border-radius:999px;
}
.addon__prices span{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,223,201,.62); }
.addon__prices strong{ font-family:var(--serif); font-size:1.25rem; font-weight:500; color:var(--gold); }

/* ═══════════ 9. FACILITATORI ═══════════ */
.pers{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem); grid-template-columns:1fr;
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--border);
}
.pers:first-of-type{ border-top:0; padding-top:0; }
@media (min-width:840px){
  .pers{ grid-template-columns:16rem 1fr; align-items:start; }
  .pers--flip{ grid-template-columns:1fr 16rem; }
  .pers--flip .pers__side{ order:2; }
}
.pers__side{ text-align:center; }
.pers__photo{
  position:relative; width:min(16rem,70vw); aspect-ratio:4/5; margin:0 auto 1rem;
  border-radius:2px; overflow:hidden;
  background:linear-gradient(150deg,var(--forest),var(--forest-light));
  box-shadow:0 26px 52px -30px rgba(14,74,54,.6);
}
.pers__photo::after{
  content:attr(data-initials);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:3.5rem; font-weight:300; letter-spacing:.06em;
  color:rgba(232,223,201,.55);
}
.pers__photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
}
.pers__role{
  margin:0; font-size:.6875rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-dark); line-height:1.9;
}
.pers__text h3{
  margin:0 0 .5rem; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem,1.4rem + 1.2vw,2.35rem); color:var(--forest);
}
.pers__q{
  margin:0 0 1.5rem; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem); color:var(--gold-dark);
}
.pers__text p{ margin:0 0 1.1rem; color:var(--ink-soft); }

/* ═══════════ 10. FAQ ═══════════ */
.faq details{
  border-top:1px solid var(--border);
}
.faq details:last-child{ border-bottom:1px solid var(--border); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.4rem 3rem 1.4rem 0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem); line-height:1.35;
  color:var(--forest);
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-dark); }
.faq summary::after{
  content:''; position:absolute; right:.4rem; top:50%;
  width:12px; height:12px; margin-top:-8px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg); transition:transform .3s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq__body{ padding:0 0 1.75rem; max-width:46rem; }
.faq__body p{ margin:0 0 1rem; color:var(--ink-soft); }
.faq__body p:last-child{ margin-bottom:0; }
.faq__closing{
  font-family:var(--serif); font-style:italic;
  font-size:1.2rem !important; color:var(--forest) !important; margin-top:1.25rem !important;
}
.fineprint{ font-size:.8125rem !important; opacity:.75; }

.checks{ list-style:none; margin:0 0 0; padding:0; }
.checks li{
  position:relative; padding:.55rem 0 .55rem 1.85rem;
  color:var(--ink-soft); font-size:.9375rem; line-height:1.7;
}
.checks li::before{
  content:''; position:absolute; left:.15rem; top:1.1rem;
  width:9px; height:5px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}

/* ═══════════ 11. REZERVARE ═══════════ */
.sec--book{
  position:relative; background:var(--forest-deep); color:var(--cream);
  overflow:hidden;
}
.book__media{ position:absolute; inset:0; z-index:0; }
.book__media img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.book__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,35,24,.92), rgba(7,35,24,.78) 45%, rgba(7,35,24,.96));
}
.book__inner{ position:relative; z-index:1; }
.book__sub{ margin:0; max-width:36rem; color:rgba(232,223,201,.8); font-size:.9375rem; }

.form{ display:flex; flex-direction:column; gap:1.1rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.form__row{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:620px){ .form__row{ grid-template-columns:1fr 1fr; } }

.field{ display:flex; flex-direction:column; gap:.5rem; }
.field__l{
  font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(232,223,201,.72);
}
.field__l b{ color:var(--gold); font-weight:500; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; font-weight:300;
  color:var(--cream); background:rgba(232,223,201,.07);
  border:1px solid rgba(232,223,201,.22); border-radius:2px;
  padding:.95rem 1.1rem;
  transition:border-color .2s ease, background .2s ease;
}
.field textarea{ resize:vertical; min-height:7rem; line-height:1.7; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:3rem;
}
.field select option{ background:var(--forest-dark); color:var(--cream); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(232,223,201,.35); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(232,223,201,.11);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#E4796F; }

.check{ display:flex; gap:.85rem; align-items:flex-start; font-size:.875rem; color:rgba(232,223,201,.78); line-height:1.6; }
.check input{
  appearance:none; flex:0 0 auto; width:19px; height:19px; margin-top:.15rem; cursor:pointer;
  border:1px solid rgba(232,223,201,.4); border-radius:2px; background:rgba(232,223,201,.07);
  transition:all .2s ease;
}
.check input:checked{ background:var(--gold); border-color:var(--gold); }
.check input:checked::after{
  content:''; display:block; width:5px; height:10px; margin:2px auto 0;
  border-right:2px solid #25200E; border-bottom:2px solid #25200E; transform:rotate(45deg);
}
.check b{ color:var(--gold); font-weight:500; }

.form__hint{
  margin:0; text-align:center;
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.form__msg{ margin:0; font-size:.9375rem; text-align:center; min-height:1.2em; }
.form__msg.is-ok{ color:#8FD3A8; }
.form__msg.is-err{ color:#E4796F; }

.book__contact{
  margin:2rem 0 0; text-align:center; font-size:.875rem; color:rgba(232,223,201,.6);
}
.book__contact a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(201,169,97,.35); }
.book__contact a:hover{ border-bottom-color:var(--gold); }

/* ═══════════ 12. FOOTER ═══════════ */
.foot{ background:var(--forest-deep); color:rgba(232,223,201,.6); padding-block:clamp(3rem,6vw,4.5rem) 6.5rem; }
.foot__inner{ text-align:center; }
.foot__logo{ width:132px; margin:0 auto 1.75rem; opacity:.9; }
.foot__line{ margin:0 0 1rem; font-size:.9375rem; line-height:1.8; }
.foot__line strong{ color:var(--cream); font-weight:500; }
.foot__meta{ margin:0; font-size:.8125rem; }
.foot__meta a{ color:var(--gold); text-decoration:none; }
.foot__meta a:hover{ text-decoration:underline; }

@media (min-width:900px){ .foot{ padding-bottom:clamp(3rem,6vw,4.5rem); } }

/* ═══════════ sticky CTA (mobil) ═══════════ */
.sticky-cta{
  position:fixed; left:.75rem; right:.75rem; bottom:.75rem; z-index:50;
  display:none; align-items:center; justify-content:center; gap:.4rem;
  padding:1.05rem 1.5rem; border-radius:999px; text-decoration:none;
  background:linear-gradient(135deg,#DCBE78,var(--gold) 45%,#A9873F);
  color:#25200E; font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6);
  transform:translateY(140%); transition:transform .35s ease;
}
.sticky-cta span{ font-weight:400; opacity:.75; }
.sticky-cta.is-on{ transform:translateY(0); }
@media (max-width:899px){ .sticky-cta{ display:flex; } }

/* ═══════════ apariție la scroll ═══════════ */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-in{ opacity:1; transform:none; transition:none; }
}

@media print{
  .sticky-cta, .hero__scroll{ display:none !important; }
  .sec--forest, .sec--book, .foot{ background:#fff !important; color:#000 !important; }
}

/* ── Titluri care se string, pe telefon ─────────────────────────────────
   Titlul devine buton: îl atingi, se deschide sau se strânge textul de sub el.
   Săgeata din dreapta arată în ce stare e.

   ⚠️ Clasa o pune JS-ul, niciodată HTML-ul. Fără JS titlurile rămân titluri
      obișnuite și tot textul e la vedere. */
.titlu-btn{
  appearance:none; background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  /* ⚠️ degetul are nevoie de suprafață, nu de precizie */
  min-height:44px;
}
/* Titlul și subtitlul lui rămân unul sub altul; săgeata stă la capăt. */
.titlu-btn__txt{ display:block; flex:1 1 auto; min-width:0; }

.titlu-btn::after{
  content:""; flex:0 0 auto; align-self:center;
  width:.6rem; height:.6rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  rotate:45deg; translate:0 -2px;
  opacity:.55; transition:rotate .18s ease;
}
.titlu-btn[aria-expanded="true"]::after{ rotate:-135deg; translate:0 2px; }
.titlu-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:4px; }

/* ⚠️ `[hidden]` e doar `display:none` din foaia browserului — orice `display`
   pus de noi îl bate. Paragrafele astea n-au unul, dar scriem regula ca să nu
   ne prindă pe picior greșit dacă mâine cineva le face flex. (S-a întâmplat
   deja la butonul de pornire al filmării.) */
.ben > p[hidden], .exp__text > p[hidden]{ display:none !important; }

/* Grilă pentru PATRU criterii. ⚠️ Fără ea, cele 4 intrau în grila de 3 coloane
   și rămânea o celulă goală — arăta a scăpare, nu a intenție. */
@media (min-width:980px){
  .facts-grid--4{ grid-template-columns:repeat(4,1fr); }
}

/* ── Filmarea din capul secțiunii „Ce vei experimenta" ───────────────────
   Materialul e vertical (394×848), filmat pe telefon. Îl lăsăm la raportul
   lui, într-o coloană îngustă: pe telefon umple firesc lățimea, pe desktop
   stă lângă text ca o fereastră. ⚠️ Nu-l punem în sloturile late ale pozelor
   (5:4) — acolo ar fi tăiat și întins peste rezoluția lui. */
.expintro{
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
@media (min-width:60rem){
  .expintro{ grid-template-columns:minmax(0,22rem) 1fr; }
}

.expintro__film{
  position:relative; margin:0;
  width:min(100%, 22rem);
  margin-inline:auto;
  aspect-ratio:394 / 848;
  border-radius:var(--r, 1rem);
  overflow:hidden;
  background:var(--forest-deep);
  box-shadow:0 24px 60px -30px rgba(7,35,24,.55);
}
.expintro__film .film{
  width:100%; height:100%; object-fit:cover; display:block;
}
.expintro__text .h2{ margin-top:.35rem; }
.expintro__text .lead{ margin-top:1rem; }

/* Butonul apare DOAR dacă pornirea singură nu merge (sau omul cere mai
   puțină mișcare). Altfel filmarea ar avea un buton mort peste ea. */
/* ⚠️ `display:grid` BATE `[hidden]` (care e doar `display:none` din foaia
   browserului). Fără regula de mai jos, butonul rămânea vizibil peste filmare
   deși era marcat ascuns — se vedea un triunghi de „play" mort. */
.film__btn[hidden]{ display:none !important; }
.film__btn{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; cursor:pointer; background:rgba(7,35,24,.35);
  display:grid; place-items:center;
}
.film__btn::after{
  content:""; width:0; height:0;
  border-left:22px solid var(--cream);
  border-top:14px solid transparent; border-bottom:14px solid transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
  margin-left:6px;
}
.film__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }

/* ⚠️ Cine a cerut mai puțină mișcare în sistem NU primește pornire automată.
   Nu ascundem filmarea — atributul `poster` arată oricum primul cadru, iar
   butonul de pornire apare, deci omul poate alege. Îl pune JS-ul. */

/* ── Rânduri fără poză din „Ce vei experimenta" ──────────────────────────
   Ștefania a cerut să rămână o singură fotografie — a ei. Restul rândurilor
   sunt doar text.

   ⚠️ Fără regula asta, grila de două coloane le lăsa textul pe jumătate de
      lățime, cu un gol lângă el. Aici devin o coloană, la lățimea la care se
      citește confortabil, aliniate cu rândul care ÎNCĂ are poză. */
/* ⚠️ Aceeași lățime și aceeași margine ca rândul care ÎNCĂ are poză — altfel
   textul pornea din alt loc decât fotografia de deasupra și se vedeau două
   aliniamente diferite în aceeași listă. Doar paragraful se strânge, ca
   rândurile să rămână de citit. */
.exp__row--text{ grid-template-columns:1fr !important; }
.exp__row--text .exp__text{ max-width:52rem; }

/* ── Două secțiuni verzi lipite ──────────────────────────────────────────
   După ce „Programul" a urcat înaintea lui „Ce vei experimenta", el a ajuns
   imediat sub „Cum vom face acest lucru" — două secțiuni verzi una sub alta.

   ⚠️ Se vedea o DUNGĂ la îmbinare: `.sec--forest::before` pune un gradient de
      lumină în colțul de sus, iar el repornea la a doua secțiune. Aici îl
      stingem, ca cele două să curgă ca un singur bloc întunecat — o trecere
      lungă prin „cum" și „când", înainte de crem-ul de la „ce vei trăi". */
.sec--forest + .sec--forest::before{ display:none; }
.sec--forest + .sec--forest{ padding-top:0; }

/* ── Pagini legale (termeni, confidențialitate) ──────────────────────────
   Cerute de Stripe pentru linkul de plată. Nu sunt pagini de vânzare — se
   citesc, nu se admiră: coloană îngustă, contrast bun, fără decor. */
.legal{ background:var(--cream-soft); min-height:100svh; }
.legal__wrap{
  max-width:46rem; margin-inline:auto;
  padding:clamp(2.5rem,6vw,5rem) var(--pad) clamp(4rem,8vw,7rem);
}
.legal__logo{ width:120px; margin-bottom:2.5rem; opacity:.9; }
.legal h1{
  font-family:var(--serif); font-weight:300; color:var(--forest);
  font-size:clamp(2rem,1.6rem + 2vw,3rem); line-height:1.15; margin:0 0 .75rem;
}
.legal__data{ color:var(--ink-soft); font-size:.875rem; margin:0 0 3rem; }
.legal h2{
  font-family:var(--serif); font-weight:400; color:var(--forest);
  font-size:1.3rem; line-height:1.3; margin:2.75rem 0 .9rem;
}
.legal p, .legal li{ color:var(--ink); line-height:1.8; margin:0 0 1rem; }
.legal ul{ padding-left:1.25rem; margin:0 0 1.25rem; }
.legal li{ margin:0 0 .5rem; }
.legal strong{ color:var(--forest); }
.legal a{ color:var(--forest); border-bottom:1px solid var(--gold); text-decoration:none; }
.legal__box{
  background:var(--bg-muted); border-left:3px solid var(--gold);
  padding:1.25rem 1.5rem; margin:1.5rem 0;
}
.legal__box p:last-child{ margin-bottom:0; }
.legal__inapoi{
  display:inline-block; margin-top:3rem;
  font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--forest); border-bottom:1px solid var(--gold); text-decoration:none;
}

/* ── Secțiunea de plată ──────────────────────────────────────────────────
   Butonul Stripe lângă codul QR: pe telefon apeși, la calculator scanezi. */
.plata{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  align-items:start;
}
@media (min-width:46rem){
  .plata{ grid-template-columns:1fr auto; }
}
.plata__text p{ margin:0 0 1rem; }
.plata__text > p:first-child{
  font-size:1.0625rem; color:var(--ink);
}
.plata__mic{ font-size:.875rem; color:var(--ink-soft); }
.plata__alt{ font-size:.875rem; color:var(--ink-soft); }
.plata__alt a{ color:var(--forest); border-bottom:1px solid var(--gold); text-decoration:none; }

/* ⚠️ Butonul vine dintr-un <iframe> al Stripe: nu-i putem schimba culorile
   din CSS-ul nostru (se stilizează din panoul lor). Îi dăm doar aer. */
stripe-buy-button{ display:block; margin:1.5rem 0 1.25rem; }

.plata__qr{ margin:0; text-align:center; }
.plata__qr img{
  width:min(200px,60vw); height:auto; display:block; margin:0 auto .75rem;
  background:#fff; padding:12px; border-radius:10px;
  box-shadow:0 12px 30px -18px rgba(14,74,54,.5);
}
.plata__qr figcaption{
  font-size:.8125rem; line-height:1.5; color:var(--ink-soft);
}

/* Câmpul completat de buton se aprinde o clipă, ca omul să observe. */
.camp-aprins{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(201,169,97,.25);
  transition:box-shadow .3s ease, border-color .3s ease;
}

/* ── Pașii de rezervare și organizatorii ─────────────────────────────────
   Cerut de Ștefania: omul să vadă limpede că sunt DOUĂ plăți, nu una. */
.plata__pasi-titlu{
  margin:0 0 .6rem; font-size:.8125rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold);
}
.plata__pasi{
  margin:0 0 1.25rem; padding-left:1.35rem;
  color:var(--ink); line-height:1.8;
}
.plata__pasi li{ margin-bottom:.4rem; }
.plata__pasi strong{ color:var(--forest); }

.plata__org{
  grid-column:1 / -1;
  margin-top:2.25rem; padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:grid; gap:1.25rem 3rem;
  font-size:.875rem; line-height:1.7; color:var(--ink-soft);
}
@media (min-width:40rem){ .plata__org{ grid-template-columns:1fr 1fr; } }
.plata__org-titlu{
  grid-column:1 / -1; margin:0;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.plata__org p{ margin:0; }
.plata__org strong{ color:var(--forest); font-weight:600; }

/* ── Pozele locației (Moeciu de Jos) ─────────────────────────
   Una lată deschide, trei înalte urmează. Pe telefon curg una sub alta.
   ⚠️ `height:auto` e OBLIGATORIU: atributele width/height de pe <img> sunt
      puse ca pagina să nu sară la încărcare, dar ele BAT `aspect-ratio` din
      stil, iar `object-fit:cover` ar tăia o felie îngustă din poză. */
.loc__poze{
  display:grid; gap:1rem; margin:2.5rem 0 3rem;
  grid-template-columns:repeat(3,1fr);
}
.loc__poza{margin:0}
.loc__poza--lat{grid-column:1 / -1}
.loc__poza img{
  display:block; width:100%; height:auto; border-radius:2px;
  box-shadow:0 30px 60px -34px rgba(14,74,54,.6);
}
.loc__poza--lat img{aspect-ratio:3/2; object-fit:cover}
.loc__poza:not(.loc__poza--lat) img{aspect-ratio:3/4; object-fit:cover}

@media (max-width:640px){
  .loc__poze{grid-template-columns:1fr 1fr; gap:.75rem}
  /* a treia poză înaltă rămâne singură pe rând — o lățim, ca să nu atârne */
  .loc__poza:last-child{grid-column:1 / -1}
  .loc__poza:last-child img{aspect-ratio:3/2}
}

/* ── „Ce mai urmează la Kaya" ─────────────────────────────────
   Paginile de eveniment nu sunt in meniul site-ului WordPress, deci cine
   primeste un link pe WhatsApp nu are de unde sa afle ca mai exista si
   altele. Banda asta e singura punte intre ele. */
.alte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1rem;margin-top:1.5rem}
.alta{
  display:flex;flex-direction:column;gap:.45rem;
  background:#fff;border:1px solid var(--border);border-radius:3px;
  padding:1.5rem 1.6rem;text-decoration:none;
  transition:box-shadow .25s ease,transform .25s ease;
}
.alta:hover{box-shadow:0 20px 40px -28px rgba(14,74,54,.5);transform:translateY(-2px)}
.alta__nume{font-family:var(--serif);font-size:1.4rem;line-height:1.2;color:var(--forest)}
.alta__cand{font-size:.95rem;color:var(--muted)}
.alta__mai{font-size:.85rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);margin-top:.35rem}