/* ============================================================
   Cofetăria Fancy Cakes — Topolog, Tulcea · demo VisionSite
   Concept: „Clopotul de cofetărie". Sigla lor e o arcadă cu tiv
   festonat, cu o steluță aurie în vârf — aici arcada devine rama
   în care stă fiecare fotografie, iar tivul festonat desparte
   secțiunile. Porțelan cald, roz prăfuit, un fir de auriu.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Caveat:wght@500;600;700&display=swap');

:root{
  --porselan:#FCF7F4;
  --porselan-2:#F7EBE8;
  --porselan-3:#F1DEDB;
  --crema:#FFFDFC;
  --cerneala:#35242A;
  --cerneala-2:#6B5158;
  --cerneala-3:#9C858B;
  --roz:#E4BCC7;
  --roz-pal:#F7D5D1;
  --roz-adanc:#B2647C;
  --roz-text:#A0526B;
  --corai:#F87F78;
  --auriu:#DFA33B;
  --auriu-pal:#F3DD98;
  --linie:rgba(53,36,42,.13);
  --linie-fina:rgba(53,36,42,.07);
  --umbra-s:0 8px 24px rgba(80,45,55,.09);
  --umbra-m:0 22px 54px -18px rgba(80,45,55,.28);
  --umbra-l:0 34px 80px -26px rgba(80,45,55,.34);
  --raza:22px;
  --raza-s:14px;
  --arc:52% 52% 8% 8% / 40% 40% 4% 4%;
  --maxw:1220px;
  --f-titlu:'Petrona', Georgia, serif;
  --f-corp:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --f-mana:'Caveat', cursive;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--porselan); color:var(--cerneala); overflow-x:clip;}
body{font-family:var(--f-corp); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5{font-family:var(--f-titlu); font-weight:600; line-height:1.1; letter-spacing:-.012em; color:var(--cerneala); text-wrap:balance;}
h1 em,h2 em,h3 em{font-style:italic; color:var(--roz-text); font-weight:500;}
a{color:inherit; text-decoration:none;}
button,input,textarea,select{font:inherit; color:inherit;}
button{background:none; border:0; cursor:pointer;}
img{max-width:100%; display:block;}
ul{list-style:none;}
[hidden]{display:none!important;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,5vw,48px);}
::selection{background:var(--roz-adanc); color:var(--porselan);}
:focus-visible{outline:2.5px solid var(--roz-adanc); outline-offset:3px; border-radius:6px;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--porselan-2);}
::-webkit-scrollbar-thumb{background:var(--roz); border-radius:10px;}

/* ---------- semnătura: tivul festonat al clopotului ---------- */
.tiv{height:15px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' viewBox='0 0 30 15'%3E%3Cpath d='M0 1.2 Q15 20 30 1.2' fill='none' stroke='%23E4BCC7' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:30px 15px; background-position:center top;}
.tiv-mare{height:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='26' viewBox='0 0 52 26'%3E%3Cpath d='M0 2 Q26 34 52 2' fill='none' stroke='%23E4BCC7' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:52px 26px;}
.desparte{padding:clamp(46px,7vw,78px) 0 0; display:flex; flex-direction:column; align-items:center; gap:16px;}
.desparte .tiv{max-width:340px;}
.steluta{width:22px; height:22px; flex:none; color:var(--auriu);}
.steluta svg{width:100%; height:100%; fill:currentColor;}

/* ---------- etichete / eyebrow ---------- */
.eticheta{display:inline-flex; align-items:center; gap:11px; font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--roz-text);}
.eticheta::before{content:''; width:24px; height:1.5px; background:var(--auriu); border-radius:2px;}
.eticheta.centru{justify-content:center;}
.eticheta.centru::after{content:''; width:24px; height:1.5px; background:var(--auriu); border-radius:2px;}
.eticheta.pe-inchis{color:var(--auriu-pal);}
.eticheta.pe-inchis::before,.eticheta.pe-inchis::after{background:var(--auriu-pal);}
.mana{font-family:var(--f-mana); font-weight:600; color:var(--roz-text); line-height:1.15;}

/* ---------- butoane ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px;
  border-radius:40px; font-weight:700; font-size:14px; letter-spacing:.015em; white-space:nowrap;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .25s, color .25s, border-color .25s, box-shadow .3s;}
.btn:hover{transform:translateY(-2px);}
.btn-plin{background:var(--roz-adanc); color:#fff; box-shadow:0 14px 28px -14px rgba(178,100,124,.8);}
.btn-plin:hover{background:#9A5069;}
.btn-contur{border:1.6px solid var(--cerneala); color:var(--cerneala);}
.btn-contur:hover{border-color:var(--roz-adanc); color:var(--roz-text);}
.btn-wa{background:#25A566; color:#fff; box-shadow:0 14px 28px -14px rgba(37,165,102,.75);}
.btn-wa:hover{background:#1E8E58;}
.btn-wa svg{width:17px; height:17px; fill:currentColor;}
.btn-pe-inchis{border:1.6px solid rgba(255,255,255,.45); color:#fff;}
.btn-pe-inchis:hover{border-color:var(--auriu-pal); color:var(--auriu-pal);}
.btn-mic{padding:11px 20px; font-size:12.5px;}
.btn-lat{width:100%;}

/* ============================================================
   ANTET
   ============================================================ */
.antet{position:fixed; inset:0 0 auto; z-index:200; padding:16px 0; transition:background .35s, padding .35s, box-shadow .35s;}
.antet .container{display:flex; align-items:center; justify-content:space-between; gap:18px;}
.antet.e-derulat{background:rgba(252,247,244,.94); backdrop-filter:blur(14px); padding:9px 0; box-shadow:0 1px 0 var(--linie-fina), 0 8px 26px -20px rgba(80,45,55,.5);}
.marca{display:flex; align-items:center; gap:11px;}
.marca img{height:52px; width:auto; transition:height .35s;}
.e-derulat .marca img{height:40px;}
.marca-text{display:flex; flex-direction:column; line-height:1.1;}
.marca-text b{font-family:var(--f-titlu); font-size:19px; font-weight:600; letter-spacing:-.01em;}
.marca-text span{font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--cerneala-3); font-weight:600;}
.nav-zona{display:flex; align-items:center; gap:30px;}
.nav-linkuri{display:flex; align-items:center; gap:26px; font-size:13px; font-weight:600; letter-spacing:.05em;}
.nav-linkuri a{position:relative; padding:5px 0;}
.nav-linkuri a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1.6px; background:var(--roz-adanc); border-radius:2px; transition:right .3s cubic-bezier(.16,1,.3,1);}
.nav-linkuri a:hover::after,.nav-linkuri a.activ::after{right:0;}
.nav-linkuri a.activ{color:var(--roz-text);}
.burger{display:none; width:44px; height:44px; border-radius:50%; border:1.6px solid var(--linie); flex-direction:column; align-items:center; justify-content:center; gap:5px; background:var(--crema);}
.burger span{width:18px; height:1.7px; background:var(--cerneala); border-radius:2px; transition:transform .3s, opacity .25s;}
.burger.e-deschis span:nth-child(1){transform:translateY(6.7px) rotate(45deg);}
.burger.e-deschis span:nth-child(2){opacity:0;}
.burger.e-deschis span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg);}

.nav-mobil{position:fixed; inset:0; z-index:190; background:var(--porselan); display:flex; flex-direction:column;
  padding:104px 28px 34px; transform:translateY(-101%); transition:transform .5s cubic-bezier(.16,1,.3,1); overflow-y:auto;}
.nav-mobil.e-deschis{transform:translateY(0);}
.nav-mobil a{font-family:var(--f-titlu); font-size:31px; font-weight:600; padding:13px 0; border-bottom:1px solid var(--linie-fina);}
.nav-mobil .nm-jos{margin-top:auto; padding-top:26px; display:flex; flex-direction:column; align-items:flex-start; gap:7px; font-size:13.5px; color:var(--cerneala-2);}
.nav-mobil .nm-jos a.btn{margin-top:14px; font-family:var(--f-corp); font-size:14px; font-weight:700; padding:15px 28px; border-bottom:0;}

/* ============================================================
   CLOPOTUL — rama-semnătură
   ============================================================ */
.clopot{position:relative; display:block;}
.clopot-cadru{position:relative; border-radius:var(--arc); overflow:hidden; background:var(--porselan-2); box-shadow:var(--umbra-m);}
.clopot-cadru img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.clopot:hover .clopot-cadru img{transform:scale(1.045);}
.clopot::before{content:''; position:absolute; left:-13px; right:-13px; top:-13px; bottom:-13px;
  border:1.6px solid var(--roz); border-radius:52% 52% 10% 10% / 40% 40% 5% 5%; pointer-events:none;}
.clopot .tiv{position:absolute; left:-13px; right:-13px; bottom:-14px; height:15px;}
.clopot-eticheta{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:3;
  background:var(--crema); border:1px solid var(--linie-fina); border-radius:30px; padding:8px 18px;
  font-size:12px; font-weight:700; letter-spacing:.04em; box-shadow:var(--umbra-s); white-space:nowrap;}
.clopot-simplu::before{display:none;}
.clopot-simplu .tiv{display:none;}

/* cartonaș scris de mână (preț / notiță) */
.cartonas{position:absolute; background:var(--crema); border:1px solid var(--linie-fina);
  border-radius:12px; padding:11px 16px; box-shadow:var(--umbra-m); text-align:center; z-index:4;}
.cartonas .mana{font-size:26px; display:block;}
.cartonas small{display:block; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--cerneala-3); font-weight:700;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding:clamp(112px,15vh,158px) 0 clamp(40px,6vw,72px); overflow:hidden;}
.hero::after{content:''; position:absolute; z-index:-1; width:min(58vw,760px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(228,188,199,.36), rgba(228,188,199,0) 68%); right:-14vw; top:-12vw;}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,64px); align-items:center;}
.hero h1{font-size:clamp(37px,5.1vw,66px); margin-top:20px;}
.hero .lede{margin-top:20px; font-size:clamp(15.5px,1.5vw,18px); color:var(--cerneala-2); max-width:480px; line-height:1.72; text-wrap:pretty;}
.hero-actiuni{display:flex; flex-wrap:wrap; gap:13px; margin-top:30px;}
.hero-fapte{display:flex; gap:clamp(18px,3vw,34px); margin-top:38px; padding-top:24px; border-top:1px solid var(--linie-fina); flex-wrap:wrap;}
.hero-fapte div{display:flex; flex-direction:column; gap:2px;}
.hero-fapte b{font-family:var(--f-titlu); font-size:23px; font-weight:600;}
.hero-fapte span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cerneala-3); font-weight:600;}
.hero-foto{position:relative; justify-self:end; width:100%; max-width:470px;}
.hero-foto .clopot-cadru{aspect-ratio:4/5;}
.hero-foto .cartonas{right:-14px; bottom:34px; transform:rotate(3deg);}
.hero-stea{position:absolute; color:var(--auriu); opacity:.9;}
.hero-stea.s1{width:34px; height:34px; left:-26px; top:14%;}
.hero-stea.s2{width:20px; height:20px; right:6%; top:-24px;}
.hero-stea.s3{width:15px; height:15px; left:12%; bottom:-8px;}

/* ============================================================
   BANDĂ RULANTĂ
   ============================================================ */
.banda{background:var(--roz-adanc); color:#fff; padding:15px 0; overflow:hidden; margin-top:clamp(34px,5vw,54px);}
.banda-pista{display:flex; width:max-content; animation:curge 34s linear infinite; gap:0;}
.banda-pista span{display:inline-flex; align-items:center; gap:22px; padding-right:22px; font-size:13px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;}
.banda-pista i{font-style:normal; color:var(--auriu-pal);}
@keyframes curge{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.banda-pista{animation:none;}}

/* ============================================================
   SECȚIUNI GENERICE
   ============================================================ */
.sectiune{padding:clamp(52px,8vw,104px) 0;}
.sectiune.pe-crem{background:var(--porselan-2);}
.cap-sectiune{display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap; margin-bottom:clamp(26px,4vw,46px);}
.cap-sectiune h2{font-size:clamp(28px,3.5vw,45px); margin-top:15px;}
.cap-sectiune p{color:var(--cerneala-2); max-width:520px; margin-top:12px; text-wrap:pretty;}
.cap-sectiune.centru{flex-direction:column; align-items:center; text-align:center;}
.cap-sectiune.centru p{margin-inline:auto;}
.legatura{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--roz-text); letter-spacing:.02em;}
.legatura svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s;}
.legatura:hover svg{transform:translateX(4px);}

/* ---------- trei stâlpi în arcade ---------- */
.stalpi{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3.4vw,42px);}
.stalp{text-align:center;}
.stalp .clopot-cadru{aspect-ratio:3/4;}
.stalp h3{font-size:clamp(20px,2.1vw,25px); margin-top:32px;}
.stalp p{color:var(--cerneala-2); font-size:14.5px; margin-top:9px; text-wrap:pretty;}
.stalp .legatura{margin-top:15px;}

/* ---------- grilă de fotografii (mozaic) ---------- */
/* grilă cu număr fix de coloane (4 / 2), ca să nu rămână goluri:
   fiecare mozaic are un număr de poze divizibil cu 4 și cu 2 */
.mozaic{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px);}
.placa{position:relative; border-radius:var(--raza-s); overflow:hidden; background:var(--porselan-3); cursor:zoom-in; aspect-ratio:1;}
.placa img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.16,1,.3,1);}
.placa:hover img{transform:scale(1.06);}
.placa figcaption{position:absolute; inset:auto 0 0; padding:34px 14px 13px; color:#fff; font-size:13px; font-weight:600;
  background:linear-gradient(to top, rgba(40,20,26,.78), rgba(40,20,26,0)); opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s;}
.placa:hover figcaption,.placa:focus-visible figcaption{opacity:1; transform:translateY(0);}


/* ---------- fișe de produs (vitrină) ---------- */
.fise{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:clamp(18px,2.6vw,30px);}
.fisa{background:var(--crema); border:1px solid var(--linie-fina); border-radius:var(--raza); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;}
.fisa:hover{transform:translateY(-5px); box-shadow:var(--umbra-m);}
.fisa-foto{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--porselan-3); cursor:zoom-in;}
.fisa-foto img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.16,1,.3,1);}
.fisa:hover .fisa-foto img{transform:scale(1.05);}
.fisa-corp{padding:17px 19px 20px; display:flex; flex-direction:column; gap:7px; flex:1;}
.fisa-corp h4{font-size:19px;}
.fisa-corp p{font-size:13.5px; color:var(--cerneala-2); line-height:1.55; flex:1;}
.fisa-jos{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:6px; padding-top:12px; border-top:1px solid var(--linie-fina);}
.pret{font-family:var(--f-titlu); font-size:21px; font-weight:600; color:var(--roz-text); white-space:nowrap;}
.pret small{font-size:11.5px; font-family:var(--f-corp); color:var(--cerneala-3); font-weight:600; letter-spacing:.04em;}
.fara-pret{font-size:12px; color:var(--cerneala-3); font-weight:600;}
.insigna{display:inline-flex; align-items:center; gap:5px; background:var(--porselan-2); color:var(--roz-text);
  border-radius:20px; padding:5px 11px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.insigna.aur{background:rgba(223,163,59,.14); color:#9C6E1C;}

/* ---------- filtre ---------- */
.filtre{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(22px,3vw,34px);}
.filtru{padding:10px 19px; border-radius:30px; border:1.5px solid var(--linie); font-size:13px; font-weight:600;
  transition:background .25s, color .25s, border-color .25s; background:var(--crema);}
.filtru:hover{border-color:var(--roz-adanc); color:var(--roz-text);}
.filtru.activ{background:var(--roz-adanc); border-color:var(--roz-adanc); color:#fff;}
.numar-rezultate{font-size:13px; color:var(--cerneala-3); margin-bottom:18px;}

/* ---------- bandă orizontală (vitrina de azi) ---------- */
.pista{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 0 22px;
  scrollbar-width:thin; margin-inline:calc(-1*clamp(18px,5vw,48px)); padding-inline:clamp(18px,5vw,48px);}
.pista::-webkit-scrollbar{height:6px;}
.pista > *{scroll-snap-align:start; flex:0 0 clamp(210px,26vw,270px);}
.pista-nav{display:flex; gap:9px;}
.pista-nav button{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--linie); background:var(--crema);
  display:flex; align-items:center; justify-content:center; transition:border-color .25s, background .25s;}
.pista-nav button:hover{border-color:var(--roz-adanc); background:var(--porselan-2);}
.pista-nav svg{width:16px; height:16px; stroke:var(--cerneala); fill:none; stroke-width:2;}

/* ---------- duo imagine + text ---------- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;}
.duo-foto{position:relative;}
.duo-foto .clopot-cadru{aspect-ratio:5/6;}
.duo h2{font-size:clamp(27px,3.4vw,43px); margin-top:16px;}
.duo p{color:var(--cerneala-2); margin-top:16px; line-height:1.75; text-wrap:pretty;}
.citat{margin-top:26px; padding:22px 26px; background:var(--crema); border-left:3px solid var(--roz);
  border-radius:0 var(--raza-s) var(--raza-s) 0; box-shadow:var(--umbra-s);}
.citat p{font-family:var(--f-titlu); font-style:italic; font-size:18px; color:var(--cerneala); margin:0; line-height:1.55;}
.citat footer{margin-top:10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cerneala-3); font-weight:700;}

/* ---------- taraba (înghețată & granita) ---------- */
.taraba{background:linear-gradient(150deg,#4A2E36,#2C1A20); color:#fff; border-radius:clamp(22px,3vw,34px); overflow:hidden;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;}
.taraba-text{padding:clamp(30px,4.4vw,58px); display:flex; flex-direction:column; justify-content:center;}
.taraba-text h2{color:#fff; font-size:clamp(26px,3.2vw,40px); margin-top:16px;}
.taraba-text h2 em{color:var(--auriu-pal);}
.taraba-text p{color:rgba(255,255,255,.8); margin-top:15px; line-height:1.72; max-width:440px;}
.taraba-preturi{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;}
.taraba-pret{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--raza-s); padding:15px 22px;}
.taraba-pret b{display:block; font-family:var(--f-titlu); font-size:30px; font-weight:600; color:var(--auriu-pal); line-height:1;}
.taraba-pret span{display:block; margin-top:6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); font-weight:600;}
.taraba-nota{margin-top:20px; font-size:12.5px; color:rgba(255,255,255,.55);}
.taraba-foto{position:relative; min-height:300px;}
.taraba-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* ---------- ocazii ---------- */
.ocazii{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(16px,2.4vw,26px);}
.ocazie{background:var(--crema); border:1px solid var(--linie-fina); border-radius:var(--raza); padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:10px; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;}
.ocazie:hover{transform:translateY(-4px); box-shadow:var(--umbra-m);}
.ocazie .steluta{width:26px; height:26px;}
.ocazie h4{font-size:20px;}
.ocazie p{font-size:14px; color:var(--cerneala-2); line-height:1.6;}
.ocazie .luna{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--roz-text); font-weight:700;}

/* ---------- program / contact ---------- */
.plan{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(26px,4vw,54px); align-items:start;}
.orar{background:var(--crema); border:1px solid var(--linie-fina); border-radius:var(--raza); padding:clamp(22px,3vw,32px); box-shadow:var(--umbra-s);}
.orar h3{font-size:22px;}
.orar ul{margin-top:18px; display:flex; flex-direction:column;}
.orar li{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--linie-fina); font-size:14.5px;}
.orar li:last-child{border-bottom:0;}
.orar li span:first-child{color:var(--cerneala-2);}
.orar li b{font-weight:700;}
.orar li.azi{color:var(--roz-text);}
.orar li.azi span:first-child{color:var(--roz-text); font-weight:700;}
.date-contact{margin-top:22px; padding-top:20px; border-top:1px solid var(--linie-fina); display:flex; flex-direction:column; gap:11px; font-size:14.5px;}
.date-contact a{font-weight:600;}
.date-contact a:hover{color:var(--roz-text);}
.harta{border-radius:var(--raza); overflow:hidden; border:1px solid var(--linie-fina); box-shadow:var(--umbra-s); min-height:340px; background:var(--porselan-3);}
.harta iframe{width:100%; height:100%; min-height:400px; border:0; display:block; filter:saturate(.85);}

/* ---------- formular ---------- */
.formular{background:var(--crema); border:1px solid var(--linie-fina); border-radius:var(--raza); padding:clamp(22px,3.4vw,40px); box-shadow:var(--umbra-s);}
.rand{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.camp{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.camp label{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--cerneala-2);}
.camp input,.camp textarea,.camp select{border:1.5px solid var(--linie); border-radius:12px; padding:13px 15px;
  background:var(--porselan); font-size:15px; transition:border-color .25s, background .25s;}
.camp input:focus,.camp textarea:focus,.camp select:focus{outline:none; border-color:var(--roz-adanc); background:#fff;}
.camp textarea{min-height:104px; resize:vertical; font-family:inherit;}
.camp .ajutor{font-size:12px; color:var(--cerneala-3);}
.jetoane{display:flex; flex-wrap:wrap; gap:8px;}
.jeton{padding:9px 16px; border-radius:30px; border:1.5px solid var(--linie); font-size:13px; font-weight:600; background:var(--porselan); transition:all .22s;}
.jeton:hover{border-color:var(--roz-adanc);}
.jeton.activ{background:var(--roz-adanc); border-color:var(--roz-adanc); color:#fff;}
.eroare-camp{border-color:var(--corai)!important;}
.mesaj-eroare{color:#C0392B; font-size:12.5px; font-weight:600; margin-top:8px;}
.previzualizare{background:var(--porselan-2); border:1px dashed var(--roz); border-radius:var(--raza-s); padding:18px 20px; margin:20px 0 6px;}
.previzualizare h5{font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--cerneala-3); font-weight:700; font-family:var(--f-corp);}
.previzualizare pre{margin-top:10px; font-family:var(--f-corp); font-size:13.5px; line-height:1.7; white-space:pre-wrap; color:var(--cerneala-2);}

/* ---------- CTA final ---------- */
.chemare{background:linear-gradient(150deg,#4A2E36,#2C1A20); color:#fff; padding:clamp(48px,7vw,86px) 0; text-align:center; position:relative; overflow:hidden;}
.chemare::before{content:''; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(223,163,59,.16),transparent 68%); top:-260px; left:50%; transform:translateX(-50%);}
.chemare h2{color:#fff; font-size:clamp(27px,3.6vw,45px); margin-top:16px; position:relative;}
.chemare p{color:rgba(255,255,255,.78); margin-top:14px; max-width:520px; margin-inline:auto; position:relative;}
.chemare-actiuni{display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:30px; position:relative;}

/* ---------- subsol ---------- */
.subsol{background:var(--porselan-2); padding:clamp(42px,6vw,70px) 0 26px; border-top:1px solid var(--linie-fina);}
.subsol-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3.4vw,44px);}
.subsol-marca img{height:88px; width:auto;}
.subsol-marca p{margin-top:16px; font-size:14px; color:var(--cerneala-2); line-height:1.65; max-width:300px;}
.subsol h5{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--cerneala-3); font-weight:700; font-family:var(--f-corp);}
.subsol ul{margin-top:15px; display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--cerneala-2);}
.subsol ul a:hover{color:var(--roz-text);}
.subsol-jos{margin-top:clamp(30px,4vw,48px); padding-top:20px; border-top:1px solid var(--linie-fina);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--cerneala-3);}

/* ---------- insignă demo ---------- */
.insigna-demo{position:fixed; right:16px; bottom:16px; z-index:150; background:var(--cerneala); color:var(--porselan);
  border-radius:30px; padding:11px 19px; font-size:12px; font-weight:700; letter-spacing:.05em; box-shadow:var(--umbra-m);
  transition:transform .3s, background .3s;}
.insigna-demo:hover{transform:translateY(-3px); background:var(--roz-adanc);}

/* ---------- lightbox ---------- */
.lupa{position:fixed; inset:0; z-index:300; background:rgba(30,16,20,.9); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,54px); opacity:0; pointer-events:none; transition:opacity .3s;}
.lupa.e-deschis{opacity:1; pointer-events:auto;}
.lupa img{max-width:100%; max-height:82vh; border-radius:var(--raza-s); box-shadow:var(--umbra-l); object-fit:contain;}
.lupa-legenda{position:absolute; left:0; right:0; bottom:clamp(16px,3vw,34px); text-align:center; color:#fff; font-size:14px; font-weight:600; padding:0 20px;}
.lupa-inchide{position:absolute; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px;}
.lupa-inchide:hover{background:rgba(255,255,255,.24);}
.lupa-sageata{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;}
.lupa-sageata:hover{background:rgba(255,255,255,.24);}
.lupa-sageata.stanga{left:clamp(8px,2vw,26px);}
.lupa-sageata.dreapta{right:clamp(8px,2vw,26px);}
.lupa-sageata svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.2;}

/* ---------- reveal ---------- */
.apare{opacity:0; transform:translateY(24px); transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);}
.apare.vazut{opacity:1; transform:none;}
.fara-apare .apare{opacity:1; transform:none; transition:none;}
@media (prefers-reduced-motion:reduce){.apare{opacity:1; transform:none; transition:none;}}

/* ---------- GDPR ---------- */
.gdpr{position:fixed; left:16px; bottom:16px; right:16px; max-width:430px; z-index:210; background:var(--crema);
  border:1px solid var(--linie); border-radius:var(--raza-s); padding:19px 21px; box-shadow:var(--umbra-l);
  transform:translateY(140%); transition:transform .5s cubic-bezier(.16,1,.3,1);}
.gdpr.e-vizibil{transform:none;}
.gdpr p{font-size:13px; color:var(--cerneala-2); line-height:1.6;}
.gdpr .gdpr-butoane{display:flex; gap:9px; margin-top:14px;}

/* ---------- 404 ---------- */
.pagina-404{min-height:78vh; display:flex; align-items:center; text-align:center; padding-top:120px;}
.pagina-404 .numar{font-family:var(--f-titlu); font-size:clamp(88px,17vw,190px); line-height:.9; color:var(--roz); font-weight:600;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .nav-linkuri{display:none;}
  .nav-zona .btn{display:none;}
  .burger{display:flex;}
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero-foto{justify-self:center; max-width:400px;}
  .hero::after{right:-30vw; top:-24vw;}
  .stalpi{grid-template-columns:1fr; gap:52px; max-width:420px; margin-inline:auto;}
  .duo{grid-template-columns:1fr; gap:34px;}
  .duo-foto{max-width:400px;}
  .taraba{grid-template-columns:1fr;}
  .taraba-foto{min-height:260px; order:-1;}
  .plan{grid-template-columns:1fr;}
  .mozaic{grid-template-columns:repeat(2,1fr);}
  .subsol-grid{grid-template-columns:1fr 1fr;}
  .subsol-marca{grid-column:span 2;}
}
@media (max-width:620px){
  .rand{grid-template-columns:1fr;}
  .mozaic{gap:10px;}
  .fise{grid-template-columns:1fr;}
  .subsol-grid{grid-template-columns:1fr;}
  .subsol-marca{grid-column:span 1;}
  .hero-foto .cartonas{right:-4px; bottom:20px; padding:9px 14px;}
  .hero-foto .cartonas .mana{font-size:23px;}
  .insigna-demo{right:12px; bottom:12px; padding:9px 15px; font-size:11px;}
  .gdpr{left:10px; right:10px; bottom:10px;}
  .cap-sectiune{flex-direction:column; align-items:flex-start;}
}
