/* MassageChisinau.com — ce se adaugă peste style.css + extra.css.
   Aceeași familie vizuală ca TerraLux, dar mai bogată: fundal cald, carduri numerotate,
   ornamente aurii, mișcare lentă la fotografii, întrebări care se deschid animat. */

:root{
  --sand:#f9f5ef;          /* fundal cald, nu alb pur — asta diferențiază de TerraLux */
  --card:#ffffff;
  --gold-1:#c9a86a;
  --gold-2:#8f7238;
}
body{background:var(--sand)}

/* ---------- apariția secțiunilor: mai amplă decât cea din temă ---------- */
.reveal{opacity:0;transform:translateY(30px) scale(.99);
        transition:opacity .95s cubic-bezier(.16,.7,.2,1),transform .95s cubic-bezier(.16,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

/* ---------- ornament auriu deasupra titlurilor centrate ---------- */
.orn{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}
.orn:before,.orn:after{content:"";width:58px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-1))}
.orn:after{background:linear-gradient(270deg,transparent,var(--gold-1))}
.orn i{display:block;width:7px;height:7px;transform:rotate(45deg);
       border:1px solid var(--gold-1);background:rgba(201,168,106,.18)}
.night .orn:before,.night .orn:after{background:linear-gradient(90deg,transparent,#e7d3a4)}
.night .orn:after{background:linear-gradient(270deg,transparent,#e7d3a4)}
.night .orn i{border-color:#e7d3a4;background:rgba(231,211,164,.2)}

/* ---------- HERO de pagină ---------- */
.page-hero.tall{width:100%;height:min(calc(100vw * 11 / 18),94vh);min-height:0;aspect-ratio:auto}
.page-hero img{transform:none;animation:none}
.page-hero .ph-inner{padding-bottom:70px}
.page-hero h1{letter-spacing:-.01em}
.page-hero .ph-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.page-hero .btn-light{background:rgba(251,243,234,.95);color:#241a12}
.page-hero .btn-light:hover{background:#fff}
.page-hero .btn-ghost{border:1px solid rgba(251,243,234,.62);color:#fbf3ea;background:transparent}
.page-hero .btn-ghost:hover{background:#fbf3ea;color:#241a12}
.ph-cue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);text-align:center;
        font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(251,243,234,.72)}
.ph-cue span{display:block;width:1px;height:38px;margin:10px auto 0;
             background:linear-gradient(#e7d3a4,transparent);animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.65)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:700px){.page-hero.tall{height:auto;min-height:0;padding-top:110px}.ph-cue{display:none}}

/* ---------- Grila de carduri (tipurile de masaj) ---------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:56px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
      overflow:hidden;display:flex;flex-direction:column;
      transition:transform .55s cubic-bezier(.16,.7,.2,1),box-shadow .55s,border-color .45s}
.card:before{content:"";position:absolute;left:0;top:0;height:2px;width:0;z-index:4;
             background:linear-gradient(90deg,var(--gold-1),var(--gold-2));transition:width .6s cubic-bezier(.16,.7,.2,1)}
.card:hover{transform:translateY(-7px);border-color:var(--line-t);
            box-shadow:0 34px 62px -34px rgba(58,44,32,.5)}
.card:hover:before{width:100%}
.card-ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(150deg,#f1eee7,#e6ddce)}
.card-ph img{width:100%;height:100%;object-fit:cover;display:block;
             transition:transform .9s cubic-bezier(.16,.7,.2,1)}
.card-ph:after{content:"";position:absolute;inset:0;
               background:linear-gradient(180deg,transparent 55%,rgba(24,16,10,.34));
               opacity:0;transition:opacity .5s}
.card:hover .card-ph img{transform:scale(1.07)}
.card:hover .card-ph:after{opacity:1}
.card-n{position:absolute;left:16px;top:16px;z-index:3;width:34px;height:34px;border-radius:50%;
        display:grid;place-items:center;font-size:12px;letter-spacing:.06em;
        color:#fbf3ea;background:rgba(20,13,8,.42);border:1px solid rgba(231,211,164,.5);
        backdrop-filter:blur(3px)}
.card-txt{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.card-txt h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:24px;line-height:1.2;color:var(--ink)}
.card-txt p{margin-top:12px;font-size:15px;font-weight:300;color:var(--ink-soft);flex:1}
.card-dur{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);
          font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--terra)}
.cards.trei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.cards,.cards.trei{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(max-width:700px){.cards,.cards.trei{grid-template-columns:1fr;gap:18px;margin-top:32px}}

/* ---------- Trei motive („Why TerraLux SPA?") ---------- */
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin-top:52px}
.reason{position:relative;padding-top:26px}
.reason:before{content:"";position:absolute;left:0;top:0;width:44px;height:1px;
               background:linear-gradient(90deg,var(--gold-1),transparent)}
.reason h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:25px;color:var(--ink)}
.reason p{margin-top:12px;font-size:16px;font-weight:300;color:var(--ink-soft)}
.reason .rule{display:none}
.reasons.patru{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
@media(max-width:1000px){.reasons.patru{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.reasons,.reasons.patru{grid-template-columns:1fr;gap:30px;margin-top:34px}}

/* ---------- Ce include (listă cu linie aurie) ---------- */
.incl{list-style:none;margin-top:28px;display:grid;gap:14px}
.incl li{position:relative;padding-left:30px;font-size:16.5px;font-weight:300;color:var(--ink-soft)}
.incl li:before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;transform:rotate(45deg);
                border:1px solid var(--gold-1);background:rgba(201,168,106,.2)}
.incl li strong{font-weight:500;color:var(--ink)}
.price-line{margin-top:30px;display:inline-flex;align-items:baseline;gap:16px;padding:18px 30px;
            border:1px solid var(--line-t);border-radius:8px;background:#fff;
            box-shadow:0 22px 46px -32px rgba(58,44,32,.4)}
.price-line .n{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:600;color:var(--ink);line-height:1}
.price-line .u{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra)}

/* ---------- Întrebări frecvente — căsuțe care se deschid animat ---------- */
.faq{max-width:920px;margin:52px auto 0;display:grid;gap:16px}
.faq details{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
             padding:26px 30px;overflow:hidden;
             transition:border-color .4s,box-shadow .5s,transform .5s}
.faq details:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
                    background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
                    transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.16,.7,.2,1)}
.faq details:hover{border-color:var(--line-t);box-shadow:0 22px 46px -30px rgba(58,44,32,.34)}
.faq details.se-deschide{border-color:var(--line-t);box-shadow:0 30px 58px -32px rgba(58,44,32,.42)}
.faq details.se-deschide:before{transform:scaleY(1)}
.faq summary{position:relative;list-style:none;cursor:pointer;display:flex;align-items:center;gap:22px;
             font-family:'Cormorant Garamond',serif;font-size:22px;line-height:1.3;
             font-weight:600;color:var(--ink);transition:color .3s}
.faq summary:hover{color:var(--gold-2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .sgn{flex:0 0 auto;margin-left:auto;position:relative;width:32px;height:32px;border-radius:50%;
                  border:1px solid var(--line-t);transition:background .35s,border-color .35s,transform .45s}
.faq summary .sgn:before,.faq summary .sgn:after{content:"";position:absolute;left:50%;top:50%;
      width:12px;height:1px;background:var(--gold-2);transform:translate(-50%,-50%);transition:background .3s,opacity .35s,transform .45s}
.faq summary .sgn:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details.se-deschide summary .sgn{background:var(--gold-1);border-color:var(--gold-1);transform:rotate(180deg)}
.faq details.se-deschide summary .sgn:before,.faq details.se-deschide summary .sgn:after{background:#fff}
.faq details.se-deschide summary .sgn:after{opacity:0}
/* deschiderea animata: randul de grila creste de la 0fr la 1fr */
.faq .a{display:grid;grid-template-rows:0fr;opacity:0;
        transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1),opacity .26s ease,margin-top .34s}
.faq .a-in{overflow:hidden}
.faq details.se-deschide .a{grid-template-rows:1fr;opacity:1;margin-top:18px}
.faq .a-in p{padding-top:18px;border-top:1px solid var(--line);
             font-size:16.5px;font-weight:300;color:var(--ink-soft)}
.faq .a-in p + p{margin-top:12px;padding-top:0;border-top:0}
@media(max-width:600px){
  .faq{gap:13px}
  .faq details{padding:20px 22px}
  .faq summary{font-size:19px;gap:14px}
}

/* ---------- Închiderea paginii ---------- */
.close-sec .lead{max-width:66ch;margin:22px auto 0;font-size:17.5px;font-weight:300;color:var(--ink-soft)}
.close-sec .sig{margin-top:26px;font-family:'Cormorant Garamond',serif;font-style:italic;
                font-size:clamp(21px,2.4vw,27px);color:var(--terra)}

/* ---------- Cardul „Explore TerraLux SPA" din subsol ---------- */
.tl-card{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0;margin-top:24px;
         border:1px solid rgba(230,208,154,.26);border-radius:14px;overflow:hidden;
         background:rgba(255,255,255,.04);transition:border-color .4s,transform .5s,box-shadow .5s}
.tl-card:hover{border-color:rgba(230,208,154,.6);transform:translateY(-4px);
               box-shadow:0 32px 64px -34px rgba(0,0,0,.65)}
.tl-ph{display:block;position:relative;overflow:hidden;background:#241a12;min-height:100%}
.tl-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
           transition:transform .9s cubic-bezier(.16,.7,.2,1)}
.tl-card:hover .tl-ph img{transform:scale(1.06)}
.tl-txt{display:block;padding:28px 32px}
.tl-k{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#e7d3a4;opacity:.9}
.tl-h{display:block;margin-top:8px;font-family:'Cormorant Garamond',serif;font-size:31px;
      font-weight:600;color:#fbf3ea;line-height:1.12}
.tl-p{display:block;margin-top:12px;font-size:15px;font-weight:300;color:rgba(245,240,232,.78);max-width:52ch}
.tl-b{display:inline-block;margin-top:20px;padding:12px 24px;border-radius:30px;
      border:1px solid rgba(230,208,154,.5);color:#e7d3a4;
      font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;transition:background .35s,color .35s}
.tl-card:hover .tl-b{background:#e7d3a4;color:#241a12}
@media(max-width:760px){
  .tl-card{grid-template-columns:1fr}
  .tl-ph{aspect-ratio:16/9;min-height:0}
  .tl-txt{padding:22px 22px 26px}
}

/* ---------- Bandă cu poză între secțiuni ---------- */
.strip{height:clamp(280px,42vw,480px)}
.strip img{transition:transform 1.4s cubic-bezier(.16,.7,.2,1)}
.strip:hover img{transform:scale(1.04)}
.strip-quote{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
             text-align:center;padding:0 28px}
.strip-quote span{font-family:'Cormorant Garamond',serif;font-style:italic;color:#fbf3ea;
                  font-size:clamp(23px,3.4vw,42px);line-height:1.35;
                  text-shadow:0 2px 34px rgba(16,10,6,.7);max-width:22ch}

/* ==========================================================================
   REPARAȚII TELEFON — se adaugă la finalul lui site.css (se încarcă ultimul).
   Nimic din desktop nu se atinge: tot ce e nou stă în @media pentru telefon,
   în afară de două corecturi care erau greșite la orice lățime (cifre, buton).
   ========================================================================== */

/* Cormorant livrează implicit cifre în stil vechi: „1,800" apărea „1,8oo",
   iar „90-Minute" apărea „9o-Minute". */
body{font-variant-numeric:lining-nums}

/* Butonul din #for-two atingea coada literelor de deasupra — celelalte butoane
   ale temei au un înveliș cu margin-top, ăsta n-are (vezi și .sig .btn-solid). */
.ritual .txt-col .btn{margin-top:30px}

@media(max-width:900px){
  /* Zonele de apăsare erau de 34px (PRICES) și 22px (linkurile) — sub pragul
     de 44px pentru deget. Înălțimea vine din min-height, nu din padding,
     ca lățimea butonului să rămână cea din design. */
  .nav-right .nav-cta{display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding-top:0;padding-bottom:0}
  .nav-links{padding:0}
  .nav-links a:not(.lang):not(.nav-cta){display:flex;align-items:center;min-height:44px;padding:0 8px}
}

@media(max-width:700px){

  /* Antetul își lua înălțimea din aspect-ratio (18/11 = 220px la 360px), iar
     .page-hero{overflow:hidden} tăia titlul, subtitlul și ambele paragrafe.
     Pe telefon înălțimea vine din conținut, cu loc rezervat pentru bara fixă. */
  /* Antetul își lua înălțimea din aspect-ratio (18/11 = 220px la 360px), iar
     .page-hero{overflow:hidden} tăia titlul, subtitlul și ambele paragrafe.
     Pe telefon nu se mai suprapun: poza stă ÎNTREAGĂ sus (18/11, exact proporția
     fișierului, deci zero decupaj — clientul a cerut să se vadă toată poza),
     iar textul vine dedesubt pe fundal închis, unde se citește fără umbre. */
  .page-hero.tall{display:flex;flex-direction:column;aspect-ratio:auto;height:auto;
    min-height:0;max-height:none;padding-top:0;background:#191009}
  .page-hero.tall img{position:static;width:100%;height:auto;aspect-ratio:18/11;
    object-fit:cover;margin-top:86px}
  .page-hero.tall .ph-scrim{display:none}
  .page-hero.tall .ph-inner{padding:28px 22px 40px}

  /* Supratitlul era pe telefon MAI mare decât pe desktop, deși coloana e de 4x
     mai îngustă: se întindea dintr-o margine în alta. */
  .kicker{font-size:11px;letter-spacing:.16em;gap:10px}
  .kicker:before{width:26px}
  /* Centrat, liniuța intra în blocul centrat și împingea textul ~23px la dreapta,
     iar pe două rânduri rămânea orfană la mijloc. Ornamentul .orn e deja deasupra. */
  .kicker.center{display:block;text-align:center}
  .kicker.center:before{display:none}

  /* Banda aurie se lățea cât ecranul și se rupea cu un cuvânt singur pe rândul doi —
     arăta a buton lat, nu a însemn discret. */
  .band{max-width:238px;padding:11px 18px;line-height:1.9}

  /* Subsolul rămăsese singurul loc unde mărirea de telefon nu se aplica:
     .seo{13.5px} bate p,li{16.5px} din regula mobilă a temei. */
  .seo,.seo p{font-size:15px;line-height:1.74}
  .seo p.seo-tags{font-size:12.5px;letter-spacing:.09em;line-height:1.9}
  .seo p.seo-hours{font-size:13px}

  /* Butoanele de închidere (pagina couples) erau decalate cu 12px unul față de
     altul și lipite de rândul italic. !important e obligatoriu: valorile vin din
     style="margin-left:12px" și style="margin-top:10px" scrise direct în HTML. */
  .close-sec .sig + div{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
    margin-top:26px !important}
  .close-sec .sig + div .btn{margin:0 !important}
}

@media(max-width:430px){
  /* Prețul: pe un rând orizontal cifra de 40px plus eticheta cu litere rărite
     depășeau coloana, deci „2" rămânea la capăt și „HOURS" cădea singur dedesubt. */
  .price-line{flex-direction:column;align-items:flex-start;gap:8px;padding:18px 24px}
  .price-line .u{white-space:nowrap;font-size:11px;letter-spacing:.15em}
}

/* ══ REPARAȚII TABLETĂ + TELEFON (runda 3) ══════════════════════════════════
   Se adaugă la finalul lui site.css, care se încarcă ultimul (după style.css
   și extra.css) — de aici se poate corecta și ce scrie extra.css.
   Verificat cu capturi la 360 / 390 / 704 / 768 / 900 / 1024 / 1100 px.
   Desktopul nu se atinge: totul stă în @media sub 1100px.               ══════ */

@media(max-width:700px){
  /* Bara fixă are 104px pe telefon, dar poza cobora doar 86px: primii 18px din
     ea (bărbia și gâtul maseuzei, vizibile în fișierul sursă) stăteau ascunși
     sub meniu. Reparația veche era scrisă pe înălțimea meniului dinainte. */
  .page-hero.tall img{margin-top:104px}
}

@media(max-width:900px){
  /* Regula de o coloană din style.css:302 era anulată de extra.css:178-180
     (@min-width:701px, aceeași specificitate, fișier încărcat mai târziu).
     De aici veneau și coloana de text de ~370px, și eticheta prețului ruptă
     cu „HOURS" singur pe rândul doi — se repară din cauză, nu din simptom. */
  .about .grid,.ritual .grid,.sig .grid{grid-template-columns:1fr;gap:34px}

  /* Pe o coloană de 856px rândurile ajungeau la ~113 caractere, de peste două
     ori limita de lizibilitate; restul paginii ține 52-66. */
  .reason p{max-width:62ch}

  /* Logoul trecut prin brightness(0) invert(1) rămâne un contur alb subțire,
     ilizibil la 40px, lângă un buton auriu de trei ori mai vizibil. Auriu pe
     fundal închis se citește — ca emblema din subsol, același fișier.
     Selectorul repetă nav:not(.solid) / nav.solid pentru că regula veche
     (style.css:100, extra.css) are specificitate mai mare decât `nav .brand img`. */
  nav:not(.solid) .brand img.logo,nav.solid .brand img.logo{filter:none}
}

@media(min-width:701px) and (max-width:900px){
  /* Aici meniul comuta pe aranjamentul de telefon: două rânduri pentru doar două
     linkuri, deși rămâneau peste 300px liberi pe primul. Revine la un singur
     rând, ca pe desktop — antetul scade de la 112px la 62px. */
  nav{flex-wrap:nowrap;row-gap:0}
  .nav-links{position:absolute;left:50%;transform:translateX(-50%);
             order:0;width:auto;gap:26px}
}

@media(min-width:701px) and (max-width:1100px){
  /* Trei carduri nu se împart în două coloane: al treilea rămânea singur, cu
     jumătate de ecran gol lângă el. Rămân trei coloane până la 700px, unde
     grila se stivuiește oricum. */
  .cards.trei{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

  /* Între 1001 și 1100px cele patru coloane aveau ~213px: toate cele patru
     titluri se rupeau în două rânduri și textul ajungea la ~26 caractere. */
  .reasons.patru{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
  /* .band e desenat ca pastilă cu bordură și colțuri rotunde, exact ca butoanele
     reale de sub el, dar e un simplu <div> neclicabil — iar pe pagina 2 conține
     chiar prețul, deci omul apasă pe el degeaba. Devine bandă cu linie sus și
     jos: se citește ca informație, nu ca buton. */
  .band{display:flex;max-width:none;border:0;border-radius:0;background:none;
        padding:12px 0;border-top:1px solid var(--line-t);
        border-bottom:1px solid var(--line-t)}
  .night .band{border-top-color:rgba(230,208,154,.3);
               border-bottom-color:rgba(230,208,154,.3)}
}

@media(max-width:600px){
  /* Cutia prețului e inline-flex: se strângea la lățimea textului și lăsa
     jumătate de coloană goală în dreapta — arăta a casetă neterminată. */
  .price-line{display:flex}

  /* Butonul auriu flotant se oprea la 4px de butonul auriu din pagină, aceeași
     culoare: cele două se citeau ca o singură formă. La 52px rămâne aer între
     ele și zona de apăsare stă tot peste pragul de 44px. */
  .fab-toggle{width:52px;height:52px}
}

/* ══ BARA DE SUS PE TELEFON ═════════════════════════════════════════════════
   Era mică și ștearsă: logo de 40px, linkuri de 16px fără niciun semn care
   spune pe ce pagină ești. Acum: bară plină de la început (nu doar la derulare),
   logo mai mare, linkuri cu spațiere de marcă și pagina curentă în auriu. ══════ */
@media(max-width:900px){
  nav,nav.solid{background:rgba(26,18,12,.92);backdrop-filter:blur(14px);
    padding:12px 18px 0;row-gap:0;box-shadow:0 10px 30px -22px rgba(0,0,0,.8)}

  /* Logoul e semnătura mărcii — la 40px se pierdea lângă butonul auriu. */
  .brand img.logo{height:54px;transition:height .3s}
  nav.solid .brand img.logo{height:46px}

  /* Butonul de preț e singura acțiune din bară: merită să se vadă ca atare. */
  .nav-right .nav-cta{font-size:12.5px;letter-spacing:.16em;padding:0 24px;min-height:46px}

  /* Rândul de linkuri: bandă proprie, despărțită de o linie aurie subțire. */
  .nav-links{margin-top:12px;padding:11px 0 0;gap:0 34px;
    border-top:1px solid rgba(231,211,164,.22)}
  .nav-links a:not(.lang):not(.nav-cta){position:relative;font-size:12.5px;
    letter-spacing:.2em;text-transform:uppercase;padding:0 2px 12px;
    color:rgba(251,243,234,.72)}

  /* Pagina pe care ești, în auriu, cu o linie sub ea — altfel omul nu știe unde e. */
  .nav-links a[aria-current="page"]{color:#e7d3a4}
  .nav-links a[aria-current="page"]:before{content:"";position:absolute;
    left:2px;right:2px;bottom:0;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--gold-1),var(--gold-2))}
}
@media(max-width:430px){
  nav,nav.solid{padding:10px 15px 0}
  .brand img.logo{height:48px}
  nav.solid .brand img.logo{height:42px}
  .nav-links{gap:0 24px}
  .nav-links a:not(.lang):not(.nav-cta){font-size:11.5px;letter-spacing:.16em}
  .nav-right .nav-cta{font-size:12px;padding:0 20px}
}

/* Bara era fixă și poza cobora cu un număr scris de mână (86px, apoi 104px) —
   de fiecare dată când se schimba înălțimea barei, poza intra sub ea. Lipită
   (sticky) își ocupă singură locul în pagină și rămâne sus la derulare, deci
   nu mai e nevoie de nicio potriveală. */
@media(max-width:900px){
  nav{position:sticky}
  .page-hero.tall img{margin-top:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   RUNDA 4 — se lipește la FINALUL lui site.css (ultimul fișier încărcat).
   Tot ce e aici bate ce e deasupra la specificitate egală, deci fiecare
   corectură de telefon/tabletă are ambele capete în @media, ca să nu scape
   pe desktop. Verificat cu capturi la 561 / 704 / 768 / 1280 px.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Auriu de TEXT ──────────────────────────────────────────────────────────
   --terra (#b1935a) e calibrat ca accent decorativ; ca text pe crem dă 2,7:1,
   sub pragul de 4,5:1. #856c3c dă 4,6:1 și pe crem, și pe cardurile albe.
   Fundalurile închise (.night, .page-hero) își fixează culoarea la 0,2,0
   și rămân champagne — nu se ating. */
:root{--terra-txt:#856c3c}
.kicker,.card-dur,.price-line .u,.band,.sec-sub{color:var(--terra-txt)}
.kicker:before{background:var(--terra-txt);opacity:.55}

/* .gal a devenit secțiune deschisă (extra.css:209), dar supratitlul a rămas
   champagne-ul de pe fundal închis din style.css:313 — 1,37:1, invizibil.
   .sig/.exp își fixează și ele culoarea la 0,2,0, deci nu le prinde regula de sus. */
.sig .kicker,.exp .kicker,.gal .kicker{color:var(--terra-txt)}
.sig .kicker:before,.exp .kicker:before,.gal .kicker:before{background:var(--terra-txt);opacity:.55}

/* Marginile lui .gal: bară de 3px cu halou, desenată când secțiunea era lemn
   închis. Pe crem haloul se vede ca o pată, nu ca o linie fină. */
.gal::before,.gal::after{height:1px;box-shadow:none;
  background:linear-gradient(90deg,transparent 4%,rgba(177,147,90,.45) 50%,transparent 96%)}

/* ── Coliziune de clase: <div class="sig"> cuibărit în <section class="sig">
   primea fundalul regulii de secțiune (style.css:177) și desena o bandă gri
   în jurul rândului italic de încheiere. */
.close-sec .sig{background:none}

/* ── Măsura de citit: singurele blocuri de text fără plafon de lățime.
   Titlurile, benzile și pozele rămân late. */
.intl .box p{max-width:30em;margin-left:auto;margin-right:auto}
.close-sec p{max-width:29em;margin-left:auto;margin-right:auto}
.seo p:not(.seo-tags):not(.seo-hours){max-width:33em}

/* ── Pagina curentă din bară, marcată la ORICE lățime ───────────────────────
   Semnul stătea doar în @media(max-width:900px), deci pe calculator cele două
   linkuri arătau identic. Culoarea are nevoie de (0,5,2) ca să treacă de
   style.css:94 și style.css:320, care altfel o înghit și pe telefon. */
nav:not(.solid) .nav-links a:not(.lang):not(.nav-cta)[aria-current="page"],
nav.solid .nav-links a:not(.lang):not(.nav-cta)[aria-current="page"]{color:#e7d3a4}
.nav-links a[aria-current="page"]:before{content:"";position:absolute;
  left:2px;right:2px;bottom:-7px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-1),var(--gold-2))}
/* :after e sublinierea de hover a temei — pe pagina curentă s-ar dubla cu :before */
.nav-links a[aria-current="page"]:after{display:none}

/* ── Ținta unei ancore nu mai intră sub bară. Pe `html`, adică pe cutia care
   derulează, acoperă orice ancoră, inclusiv una adăugată mai târziu. */
html{scroll-padding-top:108px}

/* ── Meniul de contact închis iese și din tabulare, nu doar din vedere:
   fără visibility cele patru legături rămân focusabile cu Tab și citite de
   cititorul de ecran deși sunt invizibile. Întârzierea lasă animația să termine. */
.fab-menu{visibility:hidden;
  transition:opacity .26s cubic-bezier(.4,0,.2,1),
             transform .26s cubic-bezier(.4,0,.2,1),
             visibility 0s linear .26s}
.fab-wrap.open .fab-menu{visibility:visible;
  transition:opacity .26s cubic-bezier(.4,0,.2,1),
             transform .26s cubic-bezier(.4,0,.2,1),
             visibility 0s linear 0s}

@media(min-width:701px){
  /* Rândul de carduri era cu 92px mai îngust decât restul paginii:
     extra.css:210 (.gal .wrap, 0,2,0) bate lățimea comună dată în
     @media(min-width:701px) de la extra.css:177 (.wrap, 0,1,0). */
  .gal .wrap{max-width:1272px}
}

@media(min-width:1101px){
  /* La 1272px lățime de conținut, un ecran de 1280 rămâne cu 4px de ramă:
     titlul din antet și coloanele ajung practic lipite de margine.
     Peste ~1353px nu se schimbă nimic — acolo 94vw depășește oricum 1272. */
  .wrap,.show-band,.hero-inner,.page-hero .ph-inner,.gal .wrap{max-width:min(1272px,94vw)}
}

@media(min-width:901px){
  /* Coloana emblemei lua 1.4fr (463px) pentru un logo de 150px și lăsa o
     bandă goală fix în mijlocul subsolului. */
  footer .grid{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);column-gap:72px}
}

@media(max-width:900px){
  /* Aceeași reparație de 44px ca la bara de sus (site.css:193-201): în subsol
     ancorele sunt inline, deci zona de apăsare era cutia de font (~26px), la
     11px una de alta. Înălțimea vine din min-height, ca textul să rămână 15,5px;
     inline-flex, ca linkurile scurte să nu se întindă pe toată coloana. */
  footer ul li a,.flegal a{display:inline-flex;align-items:center;min-height:44px}

  /* Linkul are cutie de 44px cu padding-bottom 12px (site.css:348):
     linia stă la 8px sub text, nu lipită de marginea barei. */
  .nav-links a[aria-current="page"]:before{bottom:12px}

  /* Bara e lipită (sticky) și are 66-74px; ancora nu mai intră sub ea. */
  html{scroll-padding-top:96px}
}

@media(max-width:700px){
  /* background:none din .band (site.css:311) nu ajungea niciodată la benzile
     din secțiunile închise: extra.css:68 `.night .band` are (0,2,0) față de
     (0,1,0). Se repetă selectorul, nu !important. */
  .night .band{background:none}

  /* Banda e acum pe toată lățimea, deci „1,800" și „MDL" cădeau pe rânduri
     diferite; se echilibrează rândurile, fără să se strâmteze banda. */
  .band{text-wrap:balance}

  /* „A Premium 2-Hour Experience" se rupea la cratimă: la 30px sintagma
     „A Premium 2-Hour" cere ~346px, iar coloana la 360px are 316px. Corpul
     scade fluid până încape. Doar pagina 2 — pe pagina 1 .ritual e #for-two,
     cu titlu scurt, și nu are de ce să se micșoreze. */
  .ritual#experience h2{max-width:29ch;font-size:clamp(22px,7.3vw,30px)}
}

@media(max-width:560px){
  /* Sub 561px bara rămâne pe două rânduri: 126-134px de acoperit. */
  html{scroll-padding-top:146px}
}

@media(min-width:561px) and (max-width:900px){
  /* Bara pe UN rând. Pragul vechi era 701px, deși la 561px rămân ~70px liberi
     lângă logo și ~30px lângă buton (măsurat pe captură) — până acolo bara
     ținea două rânduri pentru două linkuri, cu 500px goi în rândul de sus.
     Peste 701px se aplica și banda de telefon scrisă mai jos în fișier
     (site.css:333): linie aurie plutind deasupra linkurilor, iar cutia ieșea
     sub bară, deci linia paginii curente ajungea desenată pe fotografie. */
  nav,nav.solid{padding:10px 18px}
  nav{flex-wrap:nowrap;row-gap:0}
  .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    order:0;width:auto;gap:0 26px;margin-top:0;padding:0;border-top:0}
  .nav-links a:not(.lang):not(.nav-cta){padding:0 2px}
  /* cutia de 44px rămâne (zonă de apăsare), dar e centrată pe axa barei */
  .nav-links a[aria-current="page"]:before{bottom:7px}
}

@media(min-width:701px) and (max-width:900px){
  /* Grila .about e pe o coloană aici (site.css:272), dar proporția 4/5 vine
     din atributul style= scris în HTML, pe care niciun @media nu-l bate fără
     !important. Poza ajungea 856x1070px — un ecran întreg de derulat între
     două paragrafe. */
  .about .grid .ph{aspect-ratio:16/11 !important}

  /* Trei coloane de ~226px la 768px: textul ajunge la 22 caractere pe rând și
     eticheta „90 MINUTES · EACH GUEST" se rupe în două. Un card pe rând, cu
     poza în stânga, urcă măsura la 55-65 de caractere. Pragul e 900px, nu
     820px: până acolo coloanele rămân sub ~245px. */
  .cards.trei{grid-template-columns:1fr;gap:20px}
  .cards.trei .card{flex-direction:row}
  /* aspect-ratio:auto lasă poza pe înălțimea textului; min-height o oprește
     să se turtească pe cardul cu text scurt */
  .cards.trei .card-ph{flex:0 0 40%;aspect-ratio:auto;min-height:200px}
  .cards.trei .card-txt{padding:24px 26px}

  /* Subsolul: cele trei blocuri stăteau unul sub altul și jumătatea dreaptă
     rămânea goală pe toată înălțimea. Emblema ține rândul de sus (e deja
     centrată de style.css:335), EXPLORE și CONTACT stau alături. */
  footer .grid{grid-template-columns:1fr 1fr;gap:34px 44px}
  footer .fbrand{grid-column:1 / -1}
}

@media(min-width:701px) and (max-width:820px){
  /* Antetul avea înălțime fixă (100vw*11/18 = 430px la 704px), conținutul
     ancorat la bază și overflow:hidden — deci tăia de SUS: la 704px supratitlul
     dispărea complet, la 768px stătea lipit de margine. Aici înălțimea vine
     din conținut, cu proporția păstrată ca minim. */
  .page-hero.tall{height:auto;min-height:calc(100vw * 11 / 18);padding-top:34px}
}

/* Meniul plutitor de contact: cand e inchis, cele patru legaturi erau doar
   transparente — cititorul de ecran si tasta Tab treceau prin ele degeaba.
   visibility le scoate cu totul din pagina pana la deschidere. */
.fab-wrap:not(.open) .fab-menu{visibility:hidden}
.fab-wrap.open .fab-menu{visibility:visible}

/* Titlurile din blocurile centrate stateau la stanga, nu la mijloc: tema le pune
   o latime maxima (.about h2{max-width:19ch}, .ritual h2{max-width:20ch}), iar un
   bloc mai ingust decat parintele ramane lipit de stanga — text-align:center
   centreaza doar literele in interiorul lui, nu si blocul. */
.center-col h2,.center-col h3,.center-col p,.center-col .lead,.gal-head h2,.box h2{
  margin-left:auto;margin-right:auto}

/* Poza cu fatada e taiata la margini de object-fit:cover, iar firma „TerraLuxSpa"
   sta chiar in stanga cadrului — decupajul din mijloc ii manca litera T.
   Ancorata la stanga, firma ramane intreaga la orice latime a cardului. */
.tl-ph img{object-position:left top}

/* Blocul SEO din subsol statea intr-o coloana ingusta lipita la stanga, cu jumatatea
   dreapta goala — de aia subsolul iesea foarte lung. Centrat si mai lat: aceleasi
   cuvinte incap in mai putine randuri, deci subsolul se scurteaza singur. */
.seo{text-align:center}
.seo p:not(.seo-tags):not(.seo-hours){max-width:76ch;margin-left:auto;margin-right:auto}
.seo-h{margin-left:auto;margin-right:auto}
/* Randul de etichete si cel cu orarul se lipeau de marginile ecranului. */
.seo p.seo-tags,.seo p.seo-hours{max-width:88ch;margin-left:auto;margin-right:auto}
@media(max-width:700px){
  /* Pe telefon coloana e oricum ingusta; textul centrat pe randuri scurte se citeste
     mai greu, asa ca acolo ramane aliniat la stanga. */
  .seo{text-align:left}
  .seo p:not(.seo-tags):not(.seo-hours){max-width:none}
}

/* Cardul TerraLux din subsol a mostenit centrarea blocului SEO. Pe calculator
   textul sta intr-o coloana din dreapta, langa poza — centrat acolo arata strambe.
   Aliniat la stanga, incepe sub acelasi ax cu supratitlul si cu butonul.
   Pe telefon cardul se stivuieste, deci acolo centrat ramane bine. */
.tl-txt{text-align:left}
@media(max-width:760px){ .tl-txt{text-align:center} }

/* ══ COMPACTARE ════════════════════════════════════════════════════════════
   Pagina se intindea prea mult pe verticala. Masurat pe telefon la 390px:
   subsolul singur avea 2470px din 12569, iar sectiunea cu cele trei etape 2102.
   Aici se strange, fara sa se piarda nimic si fara sa scada sub pragul de
   apasare de 44px pentru deget.                                       ══════ */

@media(max-width:900px){
  /* Randurile din subsol aveau 44px inaltime PLUS 11px margine = 55px fiecare.
     Zona de apasare ramane 44px, dar vine din padding, nu se mai adauga peste. */
  footer ul li{margin-bottom:0}
  footer ul li a,.flegal a{min-height:0;padding:11px 0;display:flex;align-items:center}
  footer ul li:not(:has(a)){padding:8px 0}
  footer .grid{gap:22px;padding-bottom:26px}
  footer .fbrand .flogo{width:104px;margin-bottom:12px}
}

@media(max-width:700px){
  /* Sectiunile aveau 40px sus si jos; cele mari (.gal, .night) chiar 60-72.
     La 30 se pastreaza respiratia, dar pagina scade cu peste 300px. */
  section.about,section.ritual,section.sig,section.intl,section.why,section.book{
    padding-top:32px;padding-bottom:32px}
  section.gal{padding-top:34px;padding-bottom:34px}
  section.night{padding-top:44px;padding-bottom:44px}

  /* Cardurile: poza patrata 4/3 ocupa mult pe telefon, unde oricum sta una sub alta. */
  .card-ph{aspect-ratio:16/10}
  .cards{gap:14px;margin-top:26px}
  .card-txt{padding:20px 22px 22px}

  /* Intrebarile: 16px intre casute plus 26px in interior — se aduna la 12 casute. */
  .faq{gap:11px;margin-top:32px}
  .faq details{padding:17px 20px}

  /* Blocul SEO: randuri mai stranse, aceleasi cuvinte, mai putina inaltime. */
  .seo{padding-top:20px}
  .seo,.seo p{line-height:1.62}
  .seo p{margin-top:9px}
  .seo-h{margin-top:22px}
  .tl-card{margin-top:16px}
  .tl-txt{padding:18px 20px 20px}

  /* Titlurile de sectiune si supratitlurile stateau prea departe unul de altul. */
  .orn{margin-bottom:12px}
  .gal-head h2,.center-col h2{margin-top:10px}
  .reasons{gap:24px;margin-top:28px}
  .incl{gap:10px;margin-top:20px}
}

@media(max-width:900px){
  /* 11px sus si jos dadeau 47px pe rand; la 9px ies 43-44, exact pragul pentru deget. */
  footer ul li a,.flegal a{padding:9px 0}
}
@media(max-width:700px){
  /* Blocul SEO din subsol avea 1261px pe telefon — a zecea parte din toata pagina,
     din text pe care nimeni nu-l citeste, dar de care are nevoie Google. Ramane
     intreg, doar mai strans. */
  .seo,.seo p{font-size:14px;line-height:1.56}
  .seo p{margin-top:8px}
  .seo-h{font-size:17px;margin-top:18px;margin-bottom:2px}
  .seo p.seo-tags{font-size:11.5px;line-height:1.75;letter-spacing:.08em}
  .seo p.seo-hours{font-size:12.5px}
  .seo-cta{margin-top:14px}
  .fcopy{gap:4px}
}

@media(max-width:700px){
  /* Lista EXPLORE are 6 randuri scurte una sub alta — pe doua coloane ocupa
     jumatate din inaltime si randurile raman la fel de usor de apasat. */
  footer .grid > div:nth-child(2) ul{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  /* Emblema din subsol lua 150px doar ea. */
  footer .fbrand .flogo{width:86px;margin-bottom:8px}
  footer .grid{gap:18px;padding-bottom:22px}
  /* Randul de sus al subsolului avea 66px de gol inainte de emblema. */
  footer{padding-top:40px}
}