@charset "utf-8";
/* ==========================================================================
   UKA POMPE FUNEBRE — foaie de stil proprie, scrisa de la zero.
   Paleta: valori de culoare in aceeasi familie cu referinta agreata.
   Perechile de contrast au fost verificate WCAG inainte de a fi legate:
     wine  pe cream  = 10.90  (AAA)
     brown pe cream  =  9.46  (AAA)
     brown pe card   = 10.64  (AAA)
     white pe wine   = 12.26  (AAA)
     ink   pe gold   =  7.53  (AAA)
     gold  pe cream  =  1.89  -> AURIUL NU SE FOLOSESTE CA TEXT PE DESCHIS.
                                 Doar umplere de buton / linie / pictograma.
     taupe pe cream  =  4.48  -> doar text mare (>=24px) sau bold >=19px.
     taupe pe card   =  5.04  (AA)
   ========================================================================== */

:root {
  --wine:      #592131;
  --wine-dk:   #3f1823;
  --wine-lt:   #6f2b3f;
  --gold:      #e8a33f;
  --gold-dk:   #c07d14;
  --brown:     #4a3a33;
  --ink:       #2b1d1a;
  --taupe:     #7a6b62;
  --taupe-lt:  #b0a294;
  --cream:     #f5efe7;      /* crem cald, nu gri */
  --cream-2:   #ece2d6;
  --border:    #ddd0c0;      /* margine calda, mult mai discreta */
  --white:     #fffdfa;      /* alb cald, nu alb pur */

  --ff-head: Georgia, "Times New Roman", "Nimbus Roman", serif;
  --ff-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1140px;
  --gap: 24px;
  --radius: 12px;
  --radius-sm: 8px;
  /* umbre cu tenta calda, difuze - separa fara sa taie ca o linie */
  --shadow: 0 2px 8px rgba(89, 33, 49, .05), 0 8px 24px rgba(74, 58, 51, .07);
  --shadow-lg: 0 4px 14px rgba(89, 33, 49, .07), 0 18px 48px rgba(74, 58, 51, .12);

  --hdr-h: 92px;
}

/* ---------- baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(232,163,63,.09), transparent 65%),
    radial-gradient(ellipse 70% 45% at 8% 100%, rgba(89,33,49,.05), transparent 70%);
  background-attachment: fixed;
  color: var(--brown);
  font: 400 17px/1.72 var(--ff-body);
  overflow-x: hidden;              /* plasa de siguranta contra scroll orizontal */
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--wine-lt); }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  color: var(--wine);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(31px, 5vw, 54px); letter-spacing: -.4px; line-height: 1.15; }
h2 { font-size: clamp(25px, 3.6vw, 36px); }
h3 { font-size: clamp(20px, 2.4vw, 24px); }
p  { margin: 0 0 1.1em; }          /* fara text-align: justify — producea rauri albe */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- butoane ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 15px 28px; min-height: 48px;      /* tinta de atingere >= 48px */
  font: 600 16px/1 var(--ff-body); text-decoration: none;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: background-color .18s, color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn--gold  { background: var(--gold); color: var(--ink); }      /* 8.36 AAA */
.btn--gold:hover  { background: var(--gold-dk); color: var(--ink); }
.btn--wine  { background: var(--wine); color: var(--white); }    /* 12.45 AAA */
.btn--wine:hover  { background: var(--wine-dk); color: var(--white); }
.btn--ghost { background: transparent; color: var(--wine); border-color: var(--wine); }
.btn--ghost:hover { background: var(--wine); color: var(--white); }
.btn--lg { padding: 18px 34px; font-size: 17px; }
.btn--block { display: flex; width: 100%; }

/* ---------- bara utilitara ---------- */
.topbar {
  background: var(--wine-dk); color: var(--cream);
  font-size: 14px; line-height: 1.4;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 40px; flex-wrap: wrap;
}
.topbar a { color: var(--cream); text-decoration: none; }
/* Pe desktop numarul apare oricum pe butonul mare din antet, imediat dedesubt.
   Pe mobil butonul acela e ascuns, deci aici ramane singurul de sus. */
.topbar__tel { display: none; }
@media (max-width: 900px) { .topbar__tel { display: inline; } }
.topbar a:hover { color: var(--gold); text-decoration: underline; }
.topbar__badge {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: 13px; letter-spacing: .04em;
  padding: 4px 12px; border-radius: 100px;
}
.topbar__badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #1f7a45;
  box-shadow: 0 0 0 0 rgba(31,122,69,.7); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(31,122,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,122,69,0); }
}

/* ---------- antet lipit ---------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--cream); border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.hdr .wrap {
  display: flex; align-items: center; gap: 20px; min-height: var(--hdr-h);
}
.hdr__logo { flex: 0 0 auto; margin-right: auto; }
.hdr__logo img { width: 230px; height: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: block; padding: 10px 13px; border-radius: var(--radius);
  color: var(--brown); text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  text-transform: uppercase; white-space: nowrap;
}
.nav a:hover { background: var(--cream-2); color: var(--wine); }
.nav a[aria-current="page"] { color: var(--wine); box-shadow: inset 0 -3px 0 var(--gold); }
/* butonul de apel din sertar apare doar pe mobil; pe desktop exista .hdr__cta */
.nav .btn { display: none; }

.hdr__cta { flex: 0 0 auto; }
.hdr__cta .btn { padding: 12px 20px; }
.hdr__cta small { display: block; font-size: 11px; font-weight: 400; opacity: .85; }

.burger {
  display: none; width: 48px; height: 48px; padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 22px; height: 2px; background: var(--wine);
  margin: 0 auto; position: relative; transition: transform .2s, opacity .2s;
}
.burger span::before { content: ""; position: absolute; top: -7px; }
.burger span::after  { content: ""; position: absolute; top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
/* Hero fara fotografie.
   O duba e logistica, nu caldura, iar fotografia de doliu iese usor kitsch sau
   morbida - motiv pentru care si referintele bune din domeniu au renuntat la ea.
   In loc, lumina calda: straturi de gradient care sugereaza flacara de lumanare
   peste bordo profund. Se incarca instantaneu si nu poate arata prost pe niciun ecran. */
.hero {
  position: relative; overflow: hidden;
  background: #34131d;
  background-image:
    radial-gradient(ellipse 62% 78% at 50% 8%,  rgba(232,163,63,.40), transparent 62%),
    radial-gradient(ellipse 42% 55% at 50% 0%,  rgba(255,214,150,.34), transparent 60%),
    radial-gradient(ellipse 95% 85% at 18% 105%, rgba(111,43,63,.62), transparent 68%),
    radial-gradient(ellipse 85% 75% at 88% 95%, rgba(89,33,49,.55), transparent 66%),
    linear-gradient(to bottom, #4a1a27 0%, #34131d 58%, #240d14 100%);
}
/* voal fin, ca titlul sa stea linistit peste zona luminoasa de sus */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(20,7,11,.30), transparent 72%);
}
.hero__img { display: none; }   /* fotografia nu se mai foloseste */
.hero__inner {
  position: relative; z-index: 1;   /* peste voalul ::after, care e ultimul copil */
  text-align: center;
  padding: clamp(56px, 9vw, 110px) 20px;
  max-width: 880px; margin: 0 auto;
}
.hero h1 { color: var(--white); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero__lead {
  color: var(--cream); font-size: clamp(17px, 2vw, 20px);
  max-width: 620px; margin: 0 auto 1.8em; text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- despartirea dupa urgenta ---------- */
.split { margin-top: -46px; position: relative; z-index: 2; }
.split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.split__card {
  background: var(--white); border: 1px solid rgba(221,208,192,.5);
  border-top: 4px solid var(--wine); border-radius: var(--radius);
  padding: 34px 30px; box-shadow: var(--shadow-lg);
}
.split__card--urgent { border-top-color: var(--gold); }
.split__card h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: .35em; }
.split__card p { color: var(--taupe); font-size: 16px; }   /* pe alb: 5.27 = AA */

/* ---------- sectiuni ---------- */
.section { padding: clamp(46px, 7vw, 86px) 0; }
.section--alt { background: var(--cream-2); }
.section--wine { background: var(--wine); color: var(--cream); }
.section--wine h2, .section--wine h3 { color: var(--white); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto clamp(30px, 5vw, 54px); }
.section__head p { color: var(--taupe); font-size: 18px; }
.rule {
  width: 120px; height: 9px; border: 0; margin: 22px auto 0;
  background:
    linear-gradient(var(--gold), var(--gold)) center/100% 1px no-repeat;
  position: relative; opacity: .85;
}
.rule::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: var(--gold); transform: rotate(45deg);
  box-shadow: 0 0 0 4px var(--cream);
}
.section--alt .rule::after { box-shadow: 0 0 0 4px var(--cream-2); }

.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white); border: 1px solid rgba(221,208,192,.55);
  border-radius: var(--radius); padding: 30px;
  box-shadow: var(--shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
/* Se intinde pe toata inaltimea randului DOAR daca e copil direct al grilei.
   Altfel un card asezat langa alt continut umfla coloana si il impinge afara. */
.grid > .card { height: 100%; }
.card h3 { margin-bottom: .4em; }
.card ul { margin: 0; padding-left: 1.15em; }
.card li { margin-bottom: .4em; }
.card--pack { display: flex; flex-direction: column; }
.card--pack .price {
  font-family: var(--ff-head); font-size: 34px; color: var(--wine); margin: .2em 0 .1em;
}
.card--pack .price small { font-size: 15px; color: var(--taupe); font-family: var(--ff-body); }
.card--pack .btn { margin-top: auto; }
.card--feat { border-top: 5px solid var(--gold); }

/* ---------- galerie cu aparitie lina ---------- */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.gal figure { margin: 0; }
.gal a {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--cream-2); box-shadow: var(--shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
.gal a:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.gal img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .5s ease;
}
.gal a:hover img { transform: scale(1.04); }
.gal figcaption { margin-top: 10px; font-size: 15px; color: var(--taupe); }

/* aparitie lina la incarcare — cererea originala.
   Fara JS imaginile raman vizibile (clasa se adauga doar daca JS ruleaza). */
.js .fade { opacity: 0; transform: translateY(14px); }
.js .fade.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s ease;
}

/* ---------- acordeon intrebari ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--white); border: 1px solid rgba(221,208,192,.5);
  border-radius: var(--radius); margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-family: var(--ff-head); font-size: 19px; color: var(--wine);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 26px; line-height: 1; color: var(--gold-dk); flex: 0 0 auto;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .faq__body { padding: 0 22px 20px; }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* ---------- calculator ---------- */
.calc { background: var(--white); border: 1px solid rgba(221,208,192,.5);
         border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.calc__row { display: grid; grid-template-columns: 1fr 130px; gap: 14px; align-items: center; margin-bottom: 14px; }
.calc label { font-weight: 600; font-size: 16px; }
.calc label small { display: block; font-weight: 400; color: var(--taupe); font-size: 14px; }
.calc input, .calc select, .field input, .field textarea {
  width: 100%; padding: 12px 14px; min-height: 48px;
  font: 400 16px/1.4 var(--ff-body); color: var(--brown);
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.calc__out {
  margin-top: 20px; padding: 22px; border-radius: var(--radius-sm);
  background: var(--wine); color: var(--white);
}
.calc__out dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; }
.calc__out dt { color: var(--cream); }
.calc__out dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.calc__out .tot { border-top: 1px solid rgba(255,255,255,.3); padding-top: 10px; margin-top: 6px; font-size: 20px; font-family: var(--ff-head); }
.calc__note { font-size: 14px; color: var(--taupe); margin-top: 14px; }

/* ---------- formular ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field textarea { min-height: 150px; resize: vertical; }
.req { color: var(--wine); }

/* ---------- subsol ---------- */
.foot { background: var(--wine-dk); color: var(--cream); padding: 56px 0 0; }
.foot h3 { color: var(--white); font-size: 20px; }
.foot a { color: var(--cream); }
.foot a:hover { color: var(--gold); }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot__logo { width: 200px; margin-bottom: 18px; }
.foot__bar {
  margin-top: 44px; border-top: 1px solid rgba(237,236,233,.22);
  padding: 20px 0; font-size: 14px;
  color: var(--cream);                   /* era text inchis pe rosu inchis — ilizibil */
}

/* ---------- harta + navigare ---------- */
.harta { margin: 0; }
.harta iframe {
  display: block; border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0; background: var(--cream-2);
}
.harta figcaption {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 14px; background: var(--white);
  border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}
.harta figcaption .btn { flex: 1 1 auto; padding: 12px 16px; font-size: 15px; }
@media (max-width: 560px) { .harta figcaption .btn { flex: 1 1 100%; } }

/* ---------- retele sociale ---------- */
.foot__social { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.foot__social a {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid rgba(237,236,233,.35); text-decoration: none;
}
.foot__social a:hover { background: rgba(237,236,233,.12); color: var(--gold); }
.foot__social svg { width: 20px; height: 20px; fill: currentColor; }

.social-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-btns .btn { padding: 13px 16px; }
.social-btns svg { width: 20px; height: 20px; fill: currentColor; }
.social-btns__wa { background: #1f7a45; color: var(--white); }
.social-btns__wa:hover { background: #176036; color: var(--white); }
.social-btns__fb { background: #1877f2; color: var(--white); }   /* alb pe albastru = 3.9 : text 16px bold */
.social-btns__fb:hover { background: #0f5fc9; color: var(--white); }
@media (max-width: 560px) { .social-btns { grid-template-columns: 1fr; } }

/* ---------- butoane flotante ---------- */
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 12px; }
.fab a {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  box-shadow: var(--shadow-lg); text-decoration: none;
  transition: transform .18s;
}
.fab a:hover { transform: scale(1.07); }
.fab .fab--tel { background: var(--wine); }
.fab .fab--wa  { background: #1f7a45; }
.fab svg { width: 26px; height: 26px; fill: currentColor; }

/* bara fixa de apel, doar pe mobil */
.callbar { display: none; }

/* ---------- imagine marita ---------- */
#lightbox[hidden] { display: none; }
#lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(43, 29, 26, .92);
  display: grid; place-items: center; padding: 24px;
}
#lightbox img {
  max-width: min(1000px, 94vw); max-height: 88vh;
  width: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
#lightbox button {
  position: absolute; top: 16px; right: 16px;
  width: 48px; height: 48px; font-size: 26px; line-height: 1;
  background: var(--cream); color: var(--wine);
  border: 0; border-radius: 50%; cursor: pointer;
}
#lightbox button:hover { background: var(--gold); color: var(--ink); }

/* ---------- respect pentru reducerea miscarii ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .fade { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE — site-ul vechi era fix pe 990px si nu avea meta viewport
   ========================================================================== */

@media (max-width: 1040px) {
  .nav a { padding: 10px 9px; font-size: 14px; }
  .hdr__logo img { width: 190px; }
}

@media (max-width: 900px) {
  :root { --hdr-h: 74px; }
  .burger { display: block; }
  .hdr__cta { display: none; }

  .nav {
    position: fixed; inset: var(--hdr-h) 0 0 auto;
    width: min(320px, 86vw);
    background: var(--cream); border-left: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 16px; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav.is-open { transform: none; }
  .nav a { padding: 15px 12px; font-size: 16px; border-bottom: 1px solid var(--border); }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); }
  .nav .btn { display: flex; margin-top: 16px; }

  .split { margin-top: 0; }
  .split__grid, .grid--3, .grid--2, .foot__grid { grid-template-columns: 1fr; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { gap: 32px; }

  /* bara fixa jos: apel + WhatsApp, mereu la indemana */
  .callbar {
    display: grid; grid-template-columns: 2fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    box-shadow: 0 -2px 14px rgba(43,29,26,.22);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 58px; padding: 10px; text-decoration: none;
    font: 700 17px/1.15 var(--ff-body);
  }
  .callbar .cb--tel { background: var(--gold); color: var(--ink); }   /* 8.36 AAA */
  .callbar .cb--wa  { background: #1f7a45; color: var(--white); }
  .callbar svg { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
  body { padding-bottom: 58px; }
  .fab { bottom: 74px; }
  .fab .fab--tel, .fab .fab--wa { display: none; }  /* bara de jos le inlocuieste */
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .topbar .wrap { justify-content: center; min-height: 0; padding: 8px 20px; gap: 10px; }
  .topbar__addr { display: none; }
  .gal { grid-template-columns: 1fr; }
  .calc__row { grid-template-columns: 1fr; }
  .card, .split__card, .calc { padding: 22px 20px; }
  .btn { width: 100%; }
  .hero__actions .btn { width: 100%; }
}

@media print {
  .topbar, .nav, .burger, .fab, .callbar, .hero__img { display: none !important; }
  body { background: #fff; color: #000; }
}