/* 365cleaning.ro — stiluri */
:root {
  --verde: #0B6A57;
  --verde-inchis: #084C3F;
  --verde-deschis: #E3F0EC;
  --fundal-deschis: #F1F6F4;
  --text: #13211D;
  --text-2: #3A4A45;
  --linie: #E2E8E6;
  --inchis: #13211D;
  --whatsapp: #1C6E44;
  --raza: 18px;
  --font-titlu: 'Bricolage Grotesque', Georgia, serif;
  --font-text: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--text);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); }
a:hover { color: var(--verde-inchis); }
h1, h2, h3 { font-family: var(--font-titlu); line-height: 1.1; margin: 0; }
h1 { font-size: clamp(36px, 5.2vw, 56px); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; }
h3 { font-size: 22px; font-weight: 700; font-family: var(--font-text); line-height: 1.25; }
p { margin: 0; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sectiune { padding: 80px 0; }
.sectiune.deschis { background: var(--fundal-deschis); }
.sectiune.inchis { background: var(--inchis); color: #FFFFFF; }
.sectiune.inchis .text-2 { color: #C9D6D2; }
.antet-sectiune { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin-bottom: 36px; }
.antet-rand { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.antet-rand .antet-sectiune { margin-bottom: 0; }
.supratitlu { font-weight: 700; color: var(--verde); text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }
.sectiune.inchis .supratitlu { color: #8FD3BF; }
.text-2 { color: var(--text-2); }
.mic { font-size: 15px; }

/* Butoane */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  border: 2px solid transparent; font-family: inherit; font-weight: 700; font-size: 17px;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, transform .15s; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--verde); color: #FFFFFF; }
.btn-principal:hover { background: var(--verde-inchis); color: #FFFFFF; }
.btn-contur { background: #FFFFFF; color: var(--verde); border-color: var(--verde); }
.btn-contur:hover { background: var(--verde-deschis); color: var(--verde-inchis); }
.btn-whatsapp { background: var(--whatsapp); color: #FFFFFF; }
.btn-whatsapp:hover { background: #155636; color: #FFFFFF; }
.btn-alb { background: #FFFFFF; color: var(--text); }
.btn-alb:hover { background: var(--verde-deschis); color: var(--text); }
.btn-lat { width: 100%; }
.btn svg { flex-shrink: 0; }
:focus-visible { outline: 3px solid #F2A541; outline-offset: 2px; }

/* Antet */
.antet { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.antet-interior { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.logo:hover { color: var(--text); }
.logo-semn { width: 40px; height: 40px; border-radius: 10px; background: var(--verde); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--font-titlu); font-weight: 800; font-size: 15px; }
.logo-nume { font-family: var(--font-titlu); font-weight: 800; font-size: 22px; }
.meniu { display: flex; align-items: center; gap: 4px; }
.meniu a { text-decoration: none; color: var(--text); font-weight: 600; font-size: 16px; padding: 10px 14px; border-radius: 999px; }
.meniu a:hover { background: var(--fundal-deschis); color: var(--text); }
.meniu a[aria-current="page"] { background: var(--verde-deschis); color: var(--verde); }
.antet-actiuni { display: flex; align-items: center; gap: 8px; }
.antet-actiuni .btn { min-height: 44px; font-size: 16px; padding: 0 18px; }
.buton-meniu { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linie); background: #FFFFFF; color: var(--text); cursor: pointer; align-items: center; justify-content: center; }

@media (max-width: 900px) {
  .buton-meniu { display: inline-flex; }
  .meniu { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #FFFFFF; border-bottom: 1px solid var(--linie); flex-direction: column; align-items: stretch; padding: 12px 20px 20px; gap: 4px; box-shadow: 0 12px 24px rgba(19,33,29,0.08); }
  .meniu.deschis { display: flex; }
  .meniu a { padding: 14px 16px; font-size: 18px; }
  .antet-actiuni .btn-telefon { display: none; }
}
@media (max-width: 420px) {
  .logo-nume { font-size: 18px; }
  .logo-semn { width: 36px; height: 36px; }
  .antet-actiuni .btn { padding: 0 14px; font-size: 15px; }
  .antet-interior { gap: 8px; }
}

/* Banda de sus */
.banda-sus { background: var(--verde); color: #FFFFFF; font-size: 15px; font-weight: 600; text-align: center; padding: 8px 16px; }

/* Erou */
.erou { background: var(--fundal-deschis); padding: 56px 0 72px; overflow: hidden; }
.erou-grila { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.erou-text { display: flex; flex-direction: column; gap: 22px; }
.eticheta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid #CFE0DA; font-weight: 700; font-size: 15px; color: var(--verde); }
.erou-text .intro { font-size: 20px; color: var(--text-2); }
.butoane { display: flex; flex-wrap: wrap; gap: 12px; }
.bife { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 16px; color: var(--text-2); padding: 0; margin: 0; list-style: none; }
.bife li { display: flex; align-items: center; gap: 6px; }
.erou-poza { position: relative; }
.erou-poza img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 28px; }
.erou-card { position: absolute; left: -24px; bottom: 28px; background: #FFFFFF; border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 16px 40px rgba(19,33,29,0.16); max-width: 300px; }
.erou-card .cerc { width: 44px; height: 44px; border-radius: 999px; background: var(--verde-deschis); color: var(--verde); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.erou-card strong { display: block; font-size: 16px; }
.erou-card span { font-size: 14px; color: var(--text-2); }
@media (max-width: 900px) {
  .erou { padding: 36px 0 56px; }
  .erou-grila { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .erou-card { left: 12px; bottom: 12px; }
}

/* Banda de încredere */
.incredere { background: var(--inchis); color: #FFFFFF; }
.incredere-grila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 28px; padding-bottom: 28px; }
.incredere-item { display: flex; align-items: center; gap: 12px; }
.incredere-item .cerc { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.1); color: #8FD3BF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.incredere-item strong { display: block; font-size: 17px; }
.incredere-item span { font-size: 14px; color: #C9D6D2; }
@media (max-width: 900px) { .incredere-grila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .incredere-grila { grid-template-columns: minmax(0, 1fr); } }

/* Pași */
.pasi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: pas; }
.pas { border: 1px solid var(--linie); border-radius: var(--raza); padding: 28px; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; }
.pas-numar { width: 44px; height: 44px; border-radius: 999px; background: var(--verde); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
@media (max-width: 800px) { .pasi { grid-template-columns: minmax(0, 1fr); } }

/* Înainte / după */
.comparatii { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.comparatie { display: flex; flex-direction: column; gap: 12px; }
.compara { position: relative; aspect-ratio: 4 / 5; border-radius: var(--raza); overflow: hidden; background: #2A3833; --poz: 50%; user-select: none; }
.compara img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compara .inainte { clip-path: inset(0 calc(100% - var(--poz)) 0 0); }
.compara .linie { position: absolute; top: 0; bottom: 0; left: var(--poz); width: 3px; margin-left: -1.5px; background: #FFFFFF; pointer-events: none; }
.compara .maner { position: absolute; top: 50%; left: var(--poz); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 999px; background: #FFFFFF; color: var(--text); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.25); pointer-events: none; }
.compara .tag { position: absolute; top: 14px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; pointer-events: none; }
.compara .tag-inainte { left: 14px; background: rgba(19,33,29,0.75); color: #FFFFFF; }
.compara .tag-dupa { right: 14px; background: #FFFFFF; color: var(--verde); }
.compara input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.comparatie p { color: #C9D6D2; font-size: 16px; }
.nota-ilustrativ { margin-top: 20px; font-size: 14px; color: #9FB2AC; }
@media (max-width: 900px) { .comparatii { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; } }

/* Carduri */
.grila-carduri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grila-carduri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grila-carduri, .grila-3 { grid-template-columns: minmax(0, 1fr); } }
.card { background: #FFFFFF; border: 1px solid var(--linie); border-radius: var(--raza); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; scroll-margin-top: 96px; }
.card:hover { box-shadow: 0 14px 34px rgba(19,33,29,0.10); transform: translateY(-2px); }
.card-poza { aspect-ratio: 4 / 3; overflow: hidden; background: var(--verde-deschis); }
.card-poza img { width: 100%; height: 100%; object-fit: cover; }
.card-corp { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.card-corp .descriere { color: var(--text-2); font-size: 16px; }
.card-corp ul { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 16px; }
.card-corp ul li { margin: 2px 0; }
.card-corp .btn { white-space: normal; text-align: center; }
.card-spatiu { flex-grow: 1; }
.pret { font-size: 26px; font-weight: 800; font-family: var(--font-titlu); }
.pret small { font-size: 16px; font-weight: 600; font-family: var(--font-text); color: var(--text-2); }
.preturi { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.preturi li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 16px; }
.preturi li strong { white-space: nowrap; }
.inclus-titlu { font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.categorie { text-decoration: none; color: var(--text); }
.categorie:hover { color: var(--text); }
.categorie .de-la { font-weight: 700; color: var(--verde); }

/* Bandă cu servicii */
.banda-servicii { background: var(--verde); color: #FFFFFF; overflow: hidden; white-space: nowrap; padding: 20px 0; }
.banda-servicii .rulant { display: inline-flex; gap: 28px; font-family: var(--font-titlu); font-weight: 800; font-size: 26px; letter-spacing: 0.04em; animation: rulare 30s linear infinite; padding-left: 28px; }
@keyframes rulare { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .banda-servicii .rulant { animation: none; } }

/* De ce noi */
.doua-coloane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.doua-coloane > img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 24px; }
.lista-avantaje { display: flex; flex-direction: column; gap: 18px; margin: 8px 0 4px; }
.avantaj { display: flex; gap: 14px; }
.avantaj .cerc { width: 46px; height: 46px; border-radius: 12px; background: var(--verde-deschis); color: var(--verde); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; font-size: 14px; }
.avantaj strong { display: block; }
.avantaj p { color: var(--text-2); font-size: 16px; }
@media (max-width: 900px) { .doua-coloane { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Întrebări */
.intrebari { max-width: 820px; }
.intrebari details { border-bottom: 1px solid var(--linie); padding: 6px 0; }
.intrebari summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font-weight: 700; font-size: 19px; }
.intrebari summary::-webkit-details-marker { display: none; }
.intrebari summary::after { content: '+'; font-size: 26px; font-weight: 400; color: var(--verde); line-height: 1; }
.intrebari details[open] summary::after { content: '–'; }
.intrebari details p { color: var(--text-2); padding: 0 0 16px; }

/* Apel final */
.apel { background: var(--inchis); color: #FFFFFF; padding: 56px 0; }
.apel-interior { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.apel-interior > div:first-child { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; }
.apel h2 { font-size: clamp(28px, 3vw, 36px); }
.apel p { color: #C9D6D2; }

/* Subsol */
.subsol { background: #0D1714; color: #C9D6D2; font-size: 16px; padding: 48px 0 28px; }
.subsol-grila { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.subsol h4 { margin: 0 0 10px; color: #FFFFFF; font-size: 16px; }
.subsol a { color: #C9D6D2; }
.subsol a:hover { color: #FFFFFF; }
.subsol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.subsol .marca { font-family: var(--font-titlu); font-weight: 800; font-size: 22px; color: #FFFFFF; display: block; margin-bottom: 8px; }
.subsol-jos { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 32px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 14px; }
.subsol-jos button { background: none; border: none; color: #C9D6D2; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 800px) { .subsol-grila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 500px) { .subsol-grila { grid-template-columns: minmax(0, 1fr); } }

/* Antet de pagină (servicii, pachete, contact) */
.antet-pagina { background: var(--fundal-deschis); padding: 56px 0 48px; }
.antet-pagina .container { display: flex; flex-direction: column; gap: 14px; max-width: 1180px; }
.antet-pagina p { max-width: 720px; font-size: 19px; color: var(--text-2); }

/* Contact */
.grila-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cutie { border: 1px solid var(--linie); border-radius: var(--raza); padding: 28px; display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; }
.cutie h2 { font-size: 26px; font-family: var(--font-text); font-weight: 700; }
@media (max-width: 900px) { .grila-contact { grid-template-columns: minmax(0, 1fr); } }

/* Text legal */
.text-legal { max-width: 820px; }
.text-legal h2 { font-size: 26px; margin: 32px 0 10px; }
.text-legal p, .text-legal li { color: var(--text-2); margin-bottom: 10px; }

/* Fereastra de programare */
.programare { width: min(600px, calc(100% - 24px)); max-height: calc(100% - 24px); border: none; border-radius: 22px; padding: 0; color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,0.35); }
.programare::backdrop { background: rgba(19,33,29,0.6); }
.programare-interior { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.programare-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.programare-cap h2 { font-size: 26px; }
.programare-pret { font-weight: 700; color: var(--verde); }
.inchide { width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--linie); background: #FFFFFF; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nota-domiciliu svg { flex-shrink: 0; margin-top: 2px; }
.nota-domiciliu { display: flex; gap: 10px; align-items: flex-start; background: var(--verde-deschis); color: var(--verde-inchis); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600; }
.calendar-cadru { width: 100%; height: 600px; border: 0; border-radius: 12px; }
.calendar-lipsa { border: 2px dashed #9DB8AF; background: var(--fundal-deschis); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; color: var(--text-2); }
.calendar-lipsa .butoane { justify-content: center; }

/* WhatsApp plutitor */
.whatsapp-plutitor { position: fixed; right: 18px; bottom: 18px; width: 58px; height: 58px; border-radius: 999px; background: var(--whatsapp); color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0,0,0,0.25); z-index: 30; }
.whatsapp-plutitor:hover { color: #FFFFFF; background: #155636; }

/* Bannerul de cookie-uri */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; background: #FFFFFF; border: 1px solid var(--linie); border-radius: 18px; box-shadow: 0 20px 50px rgba(19,33,29,0.2); padding: 20px; z-index: 60; display: none; flex-direction: column; gap: 14px; font-size: 16px; }
.cookie.vizibil { display: flex; }
.cookie .butoane .btn { min-height: 44px; font-size: 16px; flex: 1 1 140px; }

/* WhatsApp în antet */
.meniu .meniu-wa { display: none; }
.btn-wa-antet { min-height: 44px; font-size: 16px; padding: 0 18px; }
@media (max-width: 1240px) {
  .btn-wa-antet .text-lung { display: none; }
  .btn-wa-antet { width: 44px; padding: 0; }
}
@media (max-width: 900px) {
  .meniu .meniu-wa { display: block; color: var(--whatsapp); font-weight: 700; }
}
@media (max-width: 420px) {
  .btn-wa-antet { display: none; }
}
.meniu a { white-space: nowrap; }
@media (max-width: 1440px) { .antet-actiuni .btn-telefon { display: none; } }