/* Pensiunea Sami — „Bucovina liniștită”: crem de var, albastru de Voroneț, lemn cald, verde de brad, ocru. */
:root{
  --paper:#F5F0E6; --paper-2:#ECE5D6; --ink:#1b2620; --muted:#5f6b63;
  --blue:#1F4E8C; --blue-dark:#173c6d; --blue-soft:#b3cbec;
  --wood:#7A5232; --fir:#2F4A3A; --fir-deep:#223a2c; --ochre:#C8962E;
  --line:rgba(27,38,32,.14); --line-light:rgba(255,255,255,.16);
  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:min(1240px, 100% - 2 * clamp(20px, 5vw, 64px));
  --r:18px; --ease:cubic-bezier(.2,.7,.2,1);
  --motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M0 7 7 0l7 7-7 7zM7 4.5l2.5 2.5L7 9.5 4.5 7zM18 7l3-3 3 3-3 3z'/%3E%3C/svg%3E");
  --rosette:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M80 2 158 80 80 158 2 80zM80 26 134 80 80 134 26 80zM80 50 110 80 80 110 50 80zM80 66 94 80 80 94 66 80zM80 2v48M80 110v48M2 80h48M110 80h48M41 41l12 12M119 41l-12 12M41 119l12-12M119 119l-12-12'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
body{margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
h1,h2{font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.012em; text-wrap:balance}
h2{font-size:clamp(2.2rem, 4.6vw, 3.9rem)}
h3{font:600 1.05rem/1.3 var(--sans)}
em{font-style:italic}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}
.wrap{width:var(--wrap); margin-inline:auto}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; z-index:400}
.skip:focus{left:8px}

/* loader scurt, doar CSS: dispare singur după 1,1 s chiar dacă scripturile nu se încarcă */
.loader{position:fixed; inset:0; z-index:300; background:var(--fir); color:var(--paper); display:grid; place-content:center; justify-items:center; gap:.9rem; pointer-events:none; animation:loaderOut .45s .65s var(--ease) forwards}
.loader svg{width:46px; height:46px; animation:loaderIn .6s var(--ease) both}
.loader span{font:500 1.5rem/1 var(--serif); letter-spacing:.04em; animation:loaderIn .6s .08s var(--ease) both}
@keyframes loaderIn{from{opacity:0; transform:translateY(10px)}}
@keyframes loaderOut{to{opacity:0; visibility:hidden}}

.eyebrow{font:600 .74rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--wood); margin-bottom:1.2rem; display:flex; align-items:center; gap:.8em}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.7}
.lead{font-size:1.14rem; line-height:1.7; color:#2c3832}
.head{max-width:780px; margin-bottom:clamp(2rem,5vw,3.6rem)}
.head-note{margin-top:1.2rem; color:var(--muted)}
.head-row{max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap}

/* motiv bucovinean: linie separatoare + rozetă discretă în colț */
.motif{height:14px; width:196px; margin-top:2.2rem; background:var(--wood); opacity:.55; -webkit-mask:var(--motif) left center/28px 14px repeat-x; mask:var(--motif) left center/28px 14px repeat-x}
.corner{position:relative; overflow:hidden}
.corner::after{content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px; background:currentColor; opacity:.07; pointer-events:none; -webkit-mask:var(--rosette) center/contain no-repeat; mask:var(--rosette) center/contain no-repeat}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; border:0; cursor:pointer; text-decoration:none;
  background:var(--blue); color:#fff; font:600 .98rem/1 var(--sans); padding:1.1em 1.6em; border-radius:999px; transition:background .3s, box-shadow .3s}
.btn svg{width:1.15em; height:1.15em; flex:none; transition:transform .3s var(--ease)}
.btn:hover{background:var(--blue-dark); box-shadow:0 14px 30px rgba(31,78,140,.28)}
.btn:hover svg{transform:translateX(3px)}
.btn-sm{padding:.85em 1.25em; font-size:.88rem}
.btn-ghost{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.6); backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff; color:var(--ink); box-shadow:none}
.btn-wa{background:#1f8f55}
.btn-wa:hover{background:#19794a; box-shadow:0 14px 30px rgba(31,143,85,.28)}
.btn-wa:hover svg,.btn-send:hover svg{transform:none}
.btn-send{width:100%; padding:1.2em}
.link-arrow{display:inline-flex; align-items:center; gap:.5em; font-weight:600; text-decoration:none; color:var(--blue); border-bottom:1px solid currentColor; padding-bottom:.25em}
.link-arrow svg{width:1.1em; height:1.1em; transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translate(3px,-3px)}
.link-btn{background:none; border:0; cursor:pointer; font:600 .92rem/1 var(--sans); color:var(--muted); text-decoration:underline; text-underline-offset:4px}
.frame{overflow:hidden; border-radius:var(--r); background:var(--paper-2)}
.frame img{width:100%; height:100%; object-fit:cover}

/* ---------- NAV ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,64px); color:#fff; transition:background .35s, color .35s, padding .35s, box-shadow .35s}
.nav.is-solid{background:rgba(245,240,230,.94); backdrop-filter:blur(10px); color:var(--ink); padding-block:11px; box-shadow:0 1px 0 var(--line)}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.brand svg{width:34px; height:34px}
.nav.is-solid .brand svg{color:var(--blue)}
.brand span{display:flex; flex-direction:column; line-height:1.1}
.brand b{font:600 1.45rem/1 var(--serif); letter-spacing:.01em}
.brand i{font:500 .66rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; opacity:.8; font-style:normal}
.nav-links{display:flex; align-items:center; gap:clamp(.9rem,1.9vw,1.9rem)}
.nav-links a:not(.btn){text-decoration:none; font-weight:500; font-size:.92rem; position:relative; padding:.4em 0}
.nav-links a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1)}
.burger{display:none; width:44px; height:44px; border:0; background:none; color:inherit; cursor:pointer; position:relative}
.burger span{position:absolute; left:10px; right:10px; height:2px; background:currentColor; transition:transform .3s var(--ease), top .3s var(--ease)}
.burger span:first-child{top:17px} .burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{top:21px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px; transform:rotate(-45deg)}

/* ---------- 1. HERO ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:var(--fir-deep)}
.hero-media{position:absolute; inset:-4% 0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
.hero-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,34,26,.55) 0%, rgba(20,34,26,.06) 26%, rgba(20,34,26,.16) 45%, rgba(20,34,26,.9) 100%)}
.hero-inner{position:relative; width:var(--wrap); margin-inline:auto; padding-bottom:clamp(36px,8vh,84px); padding-top:120px}
.hero-eyebrow{color:#f6ecd6; text-shadow:0 1px 14px rgba(0,0,0,.65)}
.hero-title{font-size:clamp(3rem, 9vw, 7.6rem); line-height:.95; margin-bottom:1.4rem; text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero-title .line{display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em}
.hero-title .line>span{display:block}
.hero-title em{color:#f3e3bf}
.hero-sub{max-width:36em; font-size:clamp(1rem,1.5vw,1.2rem); color:rgba(255,255,255,.93); margin-bottom:2rem; text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.8rem}
.badge{display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; font-size:.9rem; font-weight:500; color:rgba(255,255,255,.95)}
.badge b{font:600 1.5rem/1 var(--serif); background:var(--blue); color:#fff; padding:.34em .4em .42em; border-radius:10px 10px 10px 2px}
.badge:hover>span{text-decoration:underline; text-underline-offset:4px}

/* ---------- 2. ARGUMENTE ---------- */
.args{background:var(--fir); color:#ece5d3}
.args ul{display:grid; grid-template-columns:repeat(4,1fr)}
.args li{padding:clamp(1.8rem,3.4vw,2.8rem) 1.5rem; border-left:1px solid var(--line-light); display:grid; gap:.3rem; align-content:start}
.args li:first-child{border-left:0; padding-left:0}
.args svg{width:38px; height:38px; fill:none; stroke:var(--ochre); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.7rem}
.args b{font:500 1.35rem/1.2 var(--serif); color:#fff}
.args span{font-size:.88rem; opacity:.8}

/* ---------- POVESTE ---------- */
.about{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,6vw,6rem); align-items:center; padding-block:clamp(5rem,11vw,10rem)}
.about-text h2{margin-bottom:1.8rem}
.about-text p+p{margin-top:1.1rem}
.about-text>p:not(.lead):not(.eyebrow){color:var(--muted)}
.about-media{position:relative; padding-bottom:16%}
.frame-a{aspect-ratio:4/5; width:82%; margin-left:auto}
.frame-b{position:absolute; left:0; bottom:0; width:48%; aspect-ratio:1/1; border:8px solid var(--paper); border-radius:calc(var(--r) + 8px); box-shadow:0 30px 60px rgba(27,38,32,.18)}
img[data-parallax]{scale:1.14}

/* ---------- 3. CAMERE ---------- */
.rooms{background:var(--paper-2); padding-block:clamp(5rem,10vw,9rem); color:var(--wood)}
.rooms .wrap{color:var(--ink); position:relative; z-index:1}
.room-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.6vw,2.2rem)}
.room{background:var(--paper); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.room:hover{transform:translateY(-6px); box-shadow:0 30px 60px rgba(27,38,32,.14)}
.room-img{aspect-ratio:16/10; overflow:hidden; position:relative; cursor:zoom-in; border:0; padding:0; background:var(--paper-2); display:block; width:100%}
.room-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease)}
.room:hover .room-img img{transform:scale(1.06)}
.room-tag{position:absolute; left:14px; top:14px; background:rgba(27,38,32,.72); color:#fff; backdrop-filter:blur(6px); font:600 .74rem/1 var(--sans); letter-spacing:.06em; padding:.6em .9em; border-radius:999px; display:flex; gap:.45em; align-items:center}
.room-tag svg{width:1.05em; height:1.05em}
.room-body{padding:1.5rem 1.6rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.room-body h3{font:500 1.8rem/1.1 var(--serif)}
.room-body>p{color:var(--muted); font-size:.96rem}
.room-icons{display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:.7rem; padding-top:1rem; border-top:1px solid var(--line)}
.room-icons li{display:flex; align-items:center; gap:.45rem; font-size:.84rem; font-weight:500; color:#3c4841}
.room-icons svg{width:20px; height:20px; fill:none; stroke:var(--blue); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.room-body .btn{margin-top:1.3rem; align-self:flex-start}

/* ---------- 4. RESTAURANT ---------- */
.resto{padding-block:clamp(5rem,11vw,10rem)}
.resto-top{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:end; margin-bottom:clamp(2rem,5vw,3.6rem)}
.resto-text p+p{margin-top:1rem; color:var(--muted)}
.resto-photos{display:grid; grid-template-columns:1.9fr 1fr; grid-template-rows:1fr 1fr; gap:clamp(.7rem,1.4vw,1.2rem)}
.resto-photos .frame:first-child{grid-row:1/3; aspect-ratio:3/2}
.amen{margin-top:clamp(2rem,4vw,3rem); display:grid; grid-template-columns:repeat(5,1fr); gap:0 1.6rem; border-top:1px solid var(--line)}
.amen li{display:flex; align-items:center; gap:.7rem; padding:1rem 0; border-bottom:1px solid var(--line); font-size:.9rem; font-weight:500}
.amen li::before{content:""; flex:none; width:8px; height:8px; background:var(--ochre); transform:rotate(45deg)}

/* ---------- ANOTIMPURI ---------- */
.seasons{background:var(--paper-2); padding-block:clamp(5rem,10vw,9rem); transition:background .9s var(--ease), color .9s var(--ease)}
.seasons[data-season="iarna"]{background:#12233a; color:#eef3fa}
.seasons[data-season="iarna"] .eyebrow{color:var(--blue-soft)}
.seasons-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3.2rem)}
.seasons h2{display:grid; max-width:14em}
.seasons h2 span{grid-area:1/1; transition:opacity .6s var(--ease), transform .6s var(--ease)}
.seasons[data-season="vara"] .s-iarna,.seasons[data-season="iarna"] .s-vara{opacity:0; transform:translateY(14px); pointer-events:none}
.switch{position:relative; display:grid; grid-template-columns:1fr 1fr; background:rgba(27,38,32,.08); border-radius:999px; padding:5px; min-width:220px}
.seasons[data-season="iarna"] .switch{background:rgba(255,255,255,.1)}
.switch button{position:relative; z-index:1; border:0; background:none; cursor:pointer; font:600 .92rem/1 var(--sans); padding:.95em 1.4em; color:inherit; border-radius:999px; transition:color .4s}
.switch button[aria-selected="true"]{color:#fff}
.switch i{position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); background:var(--wood); border-radius:999px; transition:transform .5s var(--ease), background .5s}
.seasons[data-season="iarna"] .switch i{transform:translateX(100%); background:var(--blue)}
.seasons-stage{display:grid}
.trio{grid-area:1/1; display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:clamp(.7rem,1.4vw,1.2rem); transition:opacity .9s var(--ease), visibility .9s}
.trio figure{overflow:hidden; border-radius:var(--r); background:rgba(0,0,0,.08)}
.trio figure:first-child{grid-row:1/3; aspect-ratio:3/2}
.trio img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease)}
.seasons[data-season="vara"] .trio-iarna,.seasons[data-season="iarna"] .trio-vara{opacity:0; visibility:hidden}
.seasons[data-season="vara"] .trio-iarna img,.seasons[data-season="iarna"] .trio-vara img{transform:scale(1.08)}

/* ---------- 5. GALERIE ---------- */
.gallery{padding-block:clamp(5rem,10vw,9rem)}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chips button{border:1px solid var(--line); background:none; cursor:pointer; font:600 .86rem/1 var(--sans); color:var(--ink); padding:.8em 1.15em; border-radius:999px; transition:background .25s, color .25s, border-color .25s}
.chips button:hover{border-color:var(--blue); color:var(--blue)}
.chips button[aria-pressed="true"]{background:var(--blue); color:#fff; border-color:var(--blue)}
.grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; gap:clamp(.5rem,1vw,.9rem)}
.tile{position:relative; border:0; padding:0; cursor:zoom-in; overflow:hidden; border-radius:12px; aspect-ratio:3/2; background:var(--paper-2)}
.tile.big{grid-column:span 2; grid-row:span 2}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile[hidden]{display:none}

/* ---------- 6. RECENZII ---------- */
.reviews{background:var(--paper-2); padding-block:clamp(5rem,10vw,9rem); color:var(--wood)}
.reviews .wrap{color:var(--ink); position:relative; z-index:1}
.reviews-top{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,6rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem)}
.score-big{display:flex; align-items:baseline; gap:1rem; margin-bottom:1.6rem}
.score-big b{font:500 clamp(6rem,15vw,12rem)/.82 var(--serif); letter-spacing:-.03em; color:var(--blue); font-variant-numeric:tabular-nums}
.score-big span{font:italic 500 1.9rem/1 var(--serif); color:var(--wood)}
.score-note{color:var(--muted); max-width:24em}
.bars{display:grid; gap:1.25rem}
.bars li{display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem; font-weight:600; font-size:.96rem}
.bars .track{grid-column:1/-1; height:4px; background:var(--line); border-radius:4px; overflow:hidden}
.bars .fill{display:block; height:100%; background:var(--blue); border-radius:4px; transform-origin:left; width:var(--v)}
.caro-track{display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; overscroll-behavior-x:contain}
.caro-track::-webkit-scrollbar{display:none}
.caro-track blockquote{margin:0; flex:0 0 clamp(280px, 38%, 460px); scroll-snap-align:start; background:var(--paper); border-radius:var(--r); padding:clamp(1.5rem,2.6vw,2.2rem); display:flex; flex-direction:column; gap:1.4rem; min-height:260px}
.caro-track blockquote::before{content:"„"; font:500 4rem/.4 var(--serif); color:var(--ochre); height:1.4rem}
.caro-track p{font:400 clamp(1.3rem,1.9vw,1.6rem)/1.35 var(--serif)}
.caro-track cite{margin-top:auto; font:600 .86rem/1 var(--sans); font-style:normal; display:flex; align-items:center; gap:.7rem}
.caro-track cite::before{content:attr(data-i); width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:.86rem}
.caro-foot{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.4rem}
.caro-src{font-size:.86rem; color:var(--muted)}
.caro-nav{display:flex; gap:.5rem}
.caro-nav button{width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:none; cursor:pointer; font-size:1.1rem; color:var(--ink); transition:background .25s, color .25s, border-color .25s}
.caro-nav button:hover{background:var(--blue); border-color:var(--blue); color:#fff}

/* ---------- 7. ÎN APROPIERE ---------- */
.near{background:var(--fir); color:#ece5d3; padding-block:clamp(5rem,10vw,9rem)}
.near .eyebrow{color:var(--ochre)}
.near h2{color:#fff}
.near-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start}
.near-photo{position:sticky; top:13vh; height:74vh; min-height:380px}
.near-photo .frame{height:100%}
.near-now{position:absolute; left:16px; right:16px; bottom:16px; background:rgba(245,240,230,.96); color:var(--ink); border-radius:14px; padding:1rem 1.2rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem}
.near-now span{font:500 1.1rem/1 var(--serif); color:var(--wood)}
.near-now b{font:500 1.35rem/1.15 var(--serif)}
.near-now i{font:600 .86rem/1.2 var(--sans); font-style:normal; color:var(--blue); text-align:right}
.stops li{min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding-block:2rem; border-top:1px solid var(--line-light); opacity:.32; transition:opacity .6s var(--ease)}
.stops li:first-child{border-top:0}
.stops li.is-active{opacity:1}
.stops .s-idx{font:500 1.1rem/1 var(--serif); color:var(--ochre); margin-bottom:1rem}
.stops h3{font:500 clamp(2rem,3.8vw,3.2rem)/1.05 var(--serif); color:#fff; margin-bottom:.8rem}
.stops .s-dist{font:600 .95rem/1 var(--sans); color:var(--blue-soft); margin-bottom:1.1rem; display:inline-flex; align-items:center; gap:.6rem}
.stops .s-dist::before{content:""; width:8px; height:8px; background:var(--ochre); transform:rotate(45deg)}
.stops p{max-width:30em; opacity:.86}
.dist{margin-top:clamp(2rem,4vw,3rem); display:flex; flex-wrap:wrap; gap:.6rem 2.4rem; padding-top:1.6rem; border-top:1px solid var(--line-light); font-size:.9rem}
.dist li{display:flex; gap:.6rem}
.dist b{font-weight:600; color:#fff}

/* ---------- 8. FORMULAR ---------- */
.book{background:var(--paper); padding-block:clamp(5rem,10vw,9rem); color:var(--blue)}
.book-inner{display:grid; grid-template-columns:1fr minmax(0,540px); gap:clamp(2rem,6vw,6rem); align-items:start; color:var(--ink); position:relative; z-index:1}
.book h2{margin-bottom:1.5rem}
.book .lead{max-width:30em}
.why{margin-top:2.6rem; display:grid; gap:0}
.why li{display:grid; grid-template-columns:auto 1fr; gap:1.4rem; padding:1.4rem 0; border-top:1px solid var(--line)}
.why b{font:500 1.3rem/1.2 var(--serif); color:var(--wood)}
.why h3{margin-bottom:.3rem; font-size:1.08rem}
.why p{font-size:.95rem; color:var(--muted)}
.or{margin-top:1.6rem; font-size:1rem}
.tel{font:500 1.5rem/1 var(--serif); text-decoration:none; border-bottom:1px solid currentColor; white-space:nowrap; color:var(--blue)}
.or .tel{margin-left:.4rem}
.form-shell{background:#fff; border-radius:24px; box-shadow:0 40px 90px rgba(27,38,32,.14); border:1px solid var(--line)}
.form{padding:clamp(1.4rem,3vw,2.4rem); display:grid; gap:1rem}
.form[hidden]{display:none}
.form h3{font:500 1.9rem/1.1 var(--serif); margin-bottom:.3rem}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form label{display:grid; gap:.4rem; min-width:0; align-content:start}
.form label span{font:600 .72rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.form label i{font-style:normal; text-transform:none; letter-spacing:0; font-weight:400}
.form input,.form select,.form textarea{width:100%; min-width:0; font:500 1rem/1.4 var(--sans); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:.85em 1em; transition:border-color .2s, box-shadow .2s}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,78,140,.16)}
.form .bad{border-color:#b3261e; box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.ages{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:1rem; background:var(--paper-2); border-radius:14px; padding:1rem}
.ages[hidden]{display:none}
.ages select{background:#fff}
.nights:empty{display:none}
.nights{font-size:.9rem; font-weight:600; color:var(--blue); margin-top:-.4rem}
.err{color:#b3261e; font-weight:600; font-size:.92rem}
.form-note{font-size:.84rem; color:var(--muted); text-align:center}
.thanks{padding:clamp(2rem,5vw,3.6rem) clamp(1.4rem,3vw,2.4rem); display:grid; justify-items:center; text-align:center; gap:1rem}
.thanks[hidden]{display:none}
.thanks:focus{outline:none}
.thanks svg{width:64px; height:64px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.thanks h3{font:500 2.6rem/1 var(--serif)}
.thanks p{max-width:24em; font-size:1.08rem}
.thanks .thanks-sum{font-size:.92rem; color:var(--muted); background:var(--paper); border-radius:12px; padding:.9rem 1.1rem}
.thanks .btn{margin-top:.6rem}

/* ---------- 9. INFORMAȚII UTILE ---------- */
.info{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,6rem); padding-block:clamp(5rem,10vw,9rem); align-items:start; border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1px solid var(--line)}
.acc summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.4rem 0; font:500 clamp(1.4rem,2.2vw,1.8rem)/1.2 var(--serif)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font:400 1.3rem/1 var(--sans); color:var(--blue); transition:transform .4s var(--ease), background .3s, color .3s}
.acc details[open] summary::after{transform:rotate(45deg); background:var(--blue); color:#fff; border-color:var(--blue)}
.acc summary:hover{color:var(--blue)}
.acc ul{padding:0 0 1.5rem; display:grid; gap:.6rem}
.acc li{display:flex; gap:.8rem; align-items:baseline; color:#3c4841}
.acc li::before{content:""; flex:none; width:7px; height:7px; background:var(--ochre); transform:rotate(45deg) translateY(-2px)}

/* ---------- 10. CONTACT ---------- */
.contact{background:var(--fir-deep); color:#ece5d3; padding-block:clamp(4.5rem,9vw,8rem)}
.contact .eyebrow{color:var(--ochre)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center}
.tel-big{display:inline-block; font:500 clamp(2.8rem,6.6vw,5.8rem)/1 var(--serif); color:#fff; text-decoration:none; letter-spacing:-.01em; white-space:nowrap; background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat; transition:background-size .5s var(--ease)}
.tel-big:hover{background-size:100% 1px}
.contact-addr{margin-top:1.4rem; font-size:1.08rem; max-width:22em}
.contact-cta{margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.8rem}
.contact .link-arrow{color:#fff}
.contact-more{margin-top:1.8rem; display:grid; gap:.5rem}
.contact-more li{display:flex; gap:1rem}
.contact-more li[hidden]{display:none}
.contact-more span{min-width:5.5rem; opacity:.65}
.contact-map{aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--fir)}
.contact-map iframe{width:100%; height:100%; border:0; filter:grayscale(.25) contrast(1.05)}

.foot{background:#182a20; color:#9fab9f; font-size:.84rem}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot-base{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; padding-block:1.4rem; padding-right:76px}
#stars{color:var(--ochre); letter-spacing:.2em}

/* ---------- WhatsApp flotant + bară mobil ---------- */
.fab{position:fixed; right:20px; bottom:20px; z-index:40; width:58px; height:58px; border-radius:50%; background:#1f8f55; color:#fff; display:grid; place-items:center; box-shadow:0 14px 34px rgba(0,0,0,.28); transform:scale(0); transition:transform .45s var(--ease), background .25s}
.fab.show{transform:none}
.fab:hover{background:#19794a}
.fab svg{width:30px; height:30px}
.dock{display:none}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed; inset:0; z-index:100; background:rgba(14,22,17,.96); display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:clamp(10px,3vw,40px)}
.lb[hidden]{display:none}
.lb figure{display:grid; justify-items:center; gap:.8rem; min-width:0}
.lb img{max-height:84vh; max-width:100%; width:auto; border-radius:10px}
.lb figcaption{color:#d9d2c2; font-size:.9rem; text-align:center}
.lb button{border:0; background:none; color:#fff; cursor:pointer; font:300 3rem/1 var(--serif); width:56px; height:56px; border-radius:50%; transition:background .2s}
.lb button:hover{background:rgba(255,255,255,.12)}
.lb-x{position:absolute; right:14px; top:10px}

/* ---------- ANIMAȚIE (doar când GSAP e încărcat) ---------- */
.anim [data-reveal]{opacity:0; transform:translateY(28px)}
.anim [data-mask]{clip-path:inset(100% 0 0 0)}
.anim .hero-title .line>span{transform:translateY(110%)}
.anim .hero-eyebrow,.anim .hero-sub,.anim .hero-cta,.anim .badge{opacity:0}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .nav-links{position:fixed; inset:0; background:var(--fir); color:#fff; flex-direction:column; justify-content:center; gap:1.5rem; transform:translateY(-100%); transition:transform .5s var(--ease), visibility .5s; visibility:hidden}
  .nav-links.open{transform:none; visibility:visible}
  .nav-links a:not(.btn){font:500 2rem/1 var(--serif)}
  .burger{display:block; z-index:2}
  .nav.menu-open{color:#fff; background:none; box-shadow:none; backdrop-filter:none}
  .nav.menu-open .brand svg{color:#fff}
  .amen{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  body{font-size:16px}
  .about,.resto-top,.reviews-top,.book-inner,.info,.contact-grid,.near-grid{grid-template-columns:1fr}
  .about-media{order:-1}
  .args ul{grid-template-columns:1fr 1fr}
  .args li{padding-left:1.2rem}
  .args li:nth-child(odd){border-left:0; padding-left:0}
  .args li:nth-child(n+3){border-top:1px solid var(--line-light)}
  .room-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .amen{grid-template-columns:1fr 1fr}
  .resto-top{align-items:start}
  .near-photo{position:relative; top:auto; height:auto; aspect-ratio:4/3; min-height:0}
  .near-now{display:none}
  .stops li{min-height:0; opacity:1; padding-block:1.8rem}
  /* pe telefon formularul vine înaintea argumentelor */
  .book-text{display:contents}
  .book-text .eyebrow{order:1} .book-text h2{order:2; margin-bottom:0} .book-text .lead{order:3}
  .form-shell{order:4} .why{order:5; margin-top:0} .or{order:6; margin-top:0}
  .book-inner{gap:1.2rem}
  .caro-track blockquote{flex-basis:84%}
  .dock{position:fixed; left:10px; right:10px; bottom:10px; z-index:40; display:grid; grid-template-columns:auto 1fr; gap:8px; transform:translateY(140%); transition:transform .45s var(--ease)}
  .dock.show{transform:none}
  .dock a{display:flex; align-items:center; justify-content:center; gap:.5em; text-decoration:none; font-weight:600; font-size:.95rem; padding:1em 1.3em; border-radius:999px; box-shadow:0 12px 30px rgba(0,0,0,.3)}
  .dock svg{width:1.15em; height:1.15em}
  .dock-call{background:var(--paper); color:var(--ink)}
  .dock-book{background:var(--blue); color:#fff}
  /* butonul WhatsApp stă deasupra barei de jos, nu peste ea */
  .fab{right:12px; bottom:76px; width:50px; height:50px}
  .fab svg{width:26px; height:26px}
  .foot{padding-bottom:76px}
  .lb{grid-template-columns:1fr}
  .lb-nav{position:absolute; bottom:14px}
  .lb-prev{left:22%} .lb-next{right:22%}
}
@media (max-width:560px){
  .hero-eyebrow{letter-spacing:.12em; font-size:.68rem}
  .hero-eyebrow::before{width:18px}
  .hero-cta .btn{flex:1 1 100%}
  .amen{grid-template-columns:1fr}
  .resto-photos{grid-template-columns:1fr 1fr; grid-template-rows:auto auto}
  .resto-photos .frame:first-child{grid-column:1/-1; grid-row:auto}
  .resto-photos .frame{aspect-ratio:3/2}
  .trio{grid-template-columns:1fr 1fr; grid-template-rows:auto auto}
  .trio figure:first-child{grid-column:1/-1; grid-row:auto}
  .trio figure{aspect-ratio:3/2}
  .switch{width:100%}
  .corner::after{width:200px; height:200px; right:-70px; top:-70px}
  .badge{font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}