/* ============================================================
   SCPA Ceparu si Irimia — foaie de stil unica
   Toate culorile brandului sunt definite aici, in :root.
   Schimbi cele 6 valori si tot site-ul se schimba.
   ============================================================ */

:root {
  --caramiziu:   #87271F;  /* caramiziu inchis — culoarea de brand, rgb(135,39,31) */
  --caramiziu-2: #6B1D16;  /* varianta inchisa, pentru hover */
  --caramiziu-3: #D19A93;  /* varianta deschisa, pentru text pe fundal inchis */
  --inchis:      #2B1512;  /* brun-inchis derivat, pentru titluri si sectiuni inchise */
  --inchis-2:    #4A2620;  /* linii pe fundal inchis */
  --hartie:      #F7F4F1;  /* fundal general */
  --hartie-2:    #FFFFFF;  /* carduri, panouri */
  --cerneala:    #221A18;  /* text principal */
  --gri:         #6A5E5A;  /* text secundar */
  --linie:       #E0D7D2;  /* linii, chenare */

  /* variații ale culorii de brand */
  --caramiziu-4: #A8382D;  /* cărămiziu deschis, pentru degradeuri */
  --caramiziu-5: #5F1A14;  /* cărămiziu foarte închis */
  --roz:         #F2E4E0;  /* fundal foarte deschis, din aceeași familie */

  /* culori contrastante, pentru categorii și accente */
  --petrol:      #1F5E63;  /* albastru-verzui: tehnologie, asistent AI */
  --ocru:        #B8842B;  /* ocru cald: date, praguri, cifre */
  --verde:       #2E5B44;  /* verde adânc: fonduri europene, infrastructură */
  --prun:        #6B3352;  /* prună: conformitate, proceduri */

  --masura: 68ch;
  --lat: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--hartie);
  color: var(--cerneala);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Spectral, Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: var(--inchis);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.15rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1.1em; max-width: var(--masura); }

a { color: var(--inchis); text-decoration-color: var(--caramiziu); text-underline-offset: 3px; }
a:hover { color: var(--caramiziu); }

:focus-visible {
  outline: 2px solid var(--caramiziu);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; display: block; }

.container { width: min(100% - 2.5rem, var(--lat)); margin-inline: auto; }

.sar-la-continut {
  position: absolute; left: -9999px;
  background: var(--inchis); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.sar-la-continut:focus { left: 1rem; top: 1rem; }

/* ---------- antet ---------- */

.antet {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,244,239,.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linie);
}
.antet-interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .85rem 0;
}
.sigla { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.sigla img { height: 46px; width: auto; }
@media (max-width: 420px) { .sigla img { height: 38px; } }

.meniu { display: flex; align-items: center; gap: 1.6rem; }
.meniu a {
  font-size: .95rem; color: var(--cerneala); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.meniu a:hover { color: var(--inchis); border-bottom-color: var(--caramiziu); }
.meniu a[aria-current="page"] { color: var(--inchis); border-bottom-color: var(--caramiziu); }

.buton {
  display: inline-block;
  background: var(--caramiziu); color: #fff;
  padding: .72rem 1.4rem;
  font-size: .95rem; font-weight: 500;
  text-decoration: none; border: 1px solid var(--caramiziu);
}
.buton:hover { background: var(--caramiziu-2); border-color: var(--caramiziu-2); color: #fff; }
.buton-tras { background: transparent; color: var(--caramiziu); }
.buton-tras:hover { background: var(--caramiziu); color: #fff; border-color: var(--caramiziu); }

.meniu-comutator {
  display: none; background: none; border: 1px solid var(--linie);
  padding: .45rem .7rem; font: inherit; font-size: .9rem; cursor: pointer;
  color: var(--inchis);
}

@media (max-width: 860px) {
  .meniu-comutator { display: block; }
  .meniu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--hartie-2); border-bottom: 1px solid var(--linie);
    padding: .5rem 1.25rem 1.25rem;
  }
  .meniu.deschis { display: flex; }
  .meniu a { padding: .8rem 0; border-bottom: 1px solid var(--linie); }
  .meniu .buton { margin-top: .8rem; text-align: center; border-bottom: 1px solid var(--inchis); }
}


/* ---------- selector de limbă ---------- */
.limbi { display: flex; align-items: center; gap: .1rem; margin-left: .4rem; }
.limbi a, .limbi span {
  font-size: .78rem; letter-spacing: .04em; padding: .25rem .42rem;
  text-decoration: none; color: var(--gri); border: 1px solid transparent;
}
.limbi a:hover { color: var(--caramiziu); border-color: var(--linie); }
.limbi span[aria-current] { color: var(--caramiziu); border-color: var(--linie); background: var(--hartie-2); }
@media (max-width: 860px) {
  .limbi { margin: 1rem 0 0; gap: .3rem; }
  .limbi a, .limbi span { border-color: var(--linie); padding: .45rem .7rem; }
}

/* ---------- deschidere ---------- */

.deschidere { padding: 4.5rem 0 3.5rem; border-bottom: 1px solid var(--linie); }
.deschidere-grila { display: grid; grid-template-columns: 1.25fr .85fr; gap: 3.5rem; align-items: start; }
.deschidere p.lead { font-size: 1.12rem; color: var(--gri); }
.deschidere-actiuni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.panou-date {
  background: var(--hartie-2);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--caramiziu);
  padding: 1.6rem 1.5rem;
}
.panou-date h2 { font-size: 1.05rem; margin-bottom: .2rem; }
.panou-date .sursa { font-size: .8rem; color: var(--gri); margin: 0 0 1.1rem; }
.panou-date dl { margin: 0; }
.panou-date div { display: flex; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-top: 1px solid var(--linie); }
.panou-date dt { font-size: .9rem; color: var(--gri); }
.panou-date dd { margin: 0; font-family: Spectral, serif; font-size: 1rem; color: var(--inchis); white-space: nowrap; }

@media (max-width: 900px) { .deschidere-grila { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- sectiuni ---------- */

.sectiune { padding: 4rem 0; border-bottom: 1px solid var(--linie); }
.sectiune-inchisa { background: var(--inchis); color: #E8EAEE; border-bottom: none; }
.sectiune-inchisa h2, .sectiune-inchisa h3 { color: #fff; }
.sectiune-inchisa p { color: #D8CCC8; }
.sectiune-inchisa a { color: var(--caramiziu-3); }

.titlu-sectiune { max-width: var(--masura); margin-bottom: 2.4rem; }
.titlu-sectiune p { color: var(--gri); margin-bottom: 0; }

/* lista de practici — linii, nu carduri identice */
.practici { border-top: 1px solid var(--linie); }
.practica {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem;
  padding: 1.7rem 0; border-bottom: 1px solid var(--linie);
}
.practica h3 { margin: 0; }
.practica p { margin: 0; color: var(--gri); font-size: .97rem; }
.practica .detaliu { font-size: .88rem; color: var(--gri); margin-top: .5rem; }
@media (max-width: 760px) { .practica { grid-template-columns: 1fr; gap: .5rem; } }

/* echipa */
.echipa { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.6rem 1.4rem; }
.membru img { aspect-ratio: 3/4; object-fit: cover; width: 100%; background: var(--linie); }
.membru h3 { font-size: 1.02rem; margin: .8rem 0 .1rem; }
.membru p { font-size: .87rem; color: var(--gri); margin: 0; }

/* noutati */
.lista-noutati { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.stire {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 2rem;
  padding: 1.9rem 0; border-bottom: 1px solid var(--linie);
}
.stire time { font-size: .87rem; color: var(--gri); font-variant-numeric: tabular-nums; }
.stire .domeniu { display: block; font-size: .82rem; color: var(--caramiziu); margin-top: .2rem; }
.stire h3 { margin: 0 0 .45rem; font-size: 1.28rem; }
.stire h3 a { text-decoration: none; }
.stire p { margin: 0; color: var(--gri); font-size: .97rem; }
@media (max-width: 700px) { .stire { grid-template-columns: 1fr; gap: .4rem; } }

/* articol */
.articol { padding: 3rem 0 4rem; }
.firimituri { font-size: .85rem; color: var(--gri); margin-bottom: 1.6rem; }
.firimituri a { color: var(--gri); }
.articol-antet { border-bottom: 1px solid var(--linie); padding-bottom: 1.6rem; margin-bottom: 2rem; }
.articol-meta { font-size: .87rem; color: var(--gri); }
.corp { max-width: var(--masura); }
.corp h2 { font-size: 1.42rem; margin-top: 2.2rem; }
.corp h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.corp ul, .corp ol { padding-left: 1.2rem; }
.corp li { margin-bottom: .5rem; }
.corp blockquote {
  margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--caramiziu); color: var(--gri); font-style: italic;
}
.nota {
  background: var(--hartie-2); border: 1px solid var(--linie);
  border-left: 3px solid var(--caramiziu); padding: 1.1rem 1.3rem; font-size: .94rem;
}
.nota p:last-child { margin-bottom: 0; }

table.tabel { border-collapse: collapse; width: 100%; font-size: .93rem; margin: 1.5rem 0; }
table.tabel th, table.tabel td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--linie); }
table.tabel th { background: var(--hartie-2); font-weight: 600; color: var(--inchis); }
table.tabel td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* intrebari frecvente */
.intrebare { border-bottom: 1px solid var(--linie); padding: 1.1rem 0; }
.intrebare summary { cursor: pointer; font-family: Spectral, serif; font-size: 1.06rem; color: var(--inchis); }
.intrebare p { margin: .8rem 0 0; color: var(--gri); }

/* contact */
.contact-grila { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 800px) { .contact-grila { grid-template-columns: 1fr; } }
.camp { margin-bottom: 1rem; }
.camp label { display: block; font-size: .88rem; color: var(--gri); margin-bottom: .3rem; }
.camp input, .camp textarea, .camp select {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--linie); background: var(--hartie-2); color: var(--cerneala);
}
.camp textarea { min-height: 140px; resize: vertical; }

/* subsol */
.subsol { background: var(--inchis); color: #D0C3BF; padding: 3.2rem 0 2rem; font-size: .93rem; }
.subsol-grila { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.subsol h4 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.subsol a { color: #D0C3BF; text-decoration: none; }
.subsol a:hover { color: #fff; }
.subsol ul { list-style: none; margin: 0; padding: 0; }
.subsol li { margin-bottom: .45rem; }
.subsol p { color: #B4A6A1; }
.subsol-jos {
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--inchis-2);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem;
}
@media (max-width: 800px) { .subsol-grila { grid-template-columns: 1fr; gap: 2rem; } }


/* ---------- meniu cu submeniu ---------- */
.meniu details.submeniu { position: relative; }
.meniu details.submeniu > summary {
  list-style: none; cursor: pointer; font-size: .95rem; color: var(--cerneala);
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.meniu details.submeniu > summary::-webkit-details-marker { display: none; }
.meniu details.submeniu > summary::after { content: " ⌄"; color: var(--gri); }
.meniu details.submeniu[open] > summary,
.meniu details.submeniu > summary:hover { color: var(--caramiziu); border-bottom-color: var(--caramiziu); }
.meniu details.submeniu > div {
  position: absolute; top: calc(100% + .6rem); left: -1rem; z-index: 60;
  min-width: 16rem; background: var(--hartie-2);
  border: 1px solid var(--linie); border-top: 2px solid var(--caramiziu);
  padding: .5rem 0; box-shadow: 0 8px 24px rgba(43,21,18,.10);
}
.meniu details.submeniu > div a {
  display: block; padding: .55rem 1.1rem; border-bottom: none; font-size: .93rem;
}
.meniu details.submeniu > div a:hover { background: var(--hartie); color: var(--caramiziu); }
@media (max-width: 860px) {
  .meniu details.submeniu > div {
    position: static; border: none; border-left: 2px solid var(--linie);
    box-shadow: none; margin: 0 0 .5rem .5rem; padding: 0;
  }
  .meniu details.submeniu > summary { padding: .8rem 0; border-bottom: 1px solid var(--linie); }
}

/* ---------- banda de infrastructură ---------- */
.infrastructura { padding: 2.6rem 0 3rem; border-bottom: 1px solid var(--linie); background: var(--hartie-2); }
.infrastructura svg { width: 100%; height: auto; display: block; color: var(--caramiziu); }
.infrastructura .legenda {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.4rem;
  font-size: .88rem; color: var(--gri);
}
.infrastructura .legenda span { white-space: nowrap; }

/* ---------- fotografie sediu ---------- */
.sediu-grila { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.sediu-grila img { border: 1px solid var(--linie); }
@media (max-width: 800px) { .sediu-grila { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- asistent AI ---------- */
.chat { border: 1px solid var(--linie); background: var(--hartie-2); display: flex; flex-direction: column; height: 30rem; }
.chat-fir { flex: 1; overflow-y: auto; padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.chat-mesaj { max-width: 85%; padding: .8rem 1rem; font-size: .95rem; line-height: 1.55; }
.chat-mesaj.eu { align-self: flex-end; background: var(--caramiziu); color: #fff; }
.chat-mesaj.el { align-self: flex-start; background: var(--hartie); border: 1px solid var(--linie); }
.chat-mesaj p:last-child { margin-bottom: 0; }
.chat-forma { display: flex; gap: .6rem; border-top: 1px solid var(--linie); padding: .8rem; }
.chat-forma input { flex: 1; padding: .7rem .8rem; font: inherit; font-size: .95rem; border: 1px solid var(--linie); background: var(--hartie-2); }
.sugestii { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.sugestii button {
  font: inherit; font-size: .87rem; padding: .45rem .8rem; cursor: pointer;
  background: var(--hartie-2); border: 1px solid var(--linie); color: var(--cerneala);
}
.sugestii button:hover { border-color: var(--caramiziu); color: var(--caramiziu); }

/* ---------- căutare experiență / dosare ---------- */
.cautare { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.cautare input, .cautare select { padding: .7rem .8rem; font: inherit; font-size: .95rem; border: 1px solid var(--linie); background: var(--hartie-2); }
.cautare input { flex: 1; min-width: 14rem; }
.rezultat { border-bottom: 1px solid var(--linie); padding: 1.4rem 0; }
.rezultat h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.rezultat .eticheta { font-size: .8rem; color: var(--caramiziu); letter-spacing: .03em; }
.rezultat p { margin: .4rem 0 0; font-size: .95rem; color: var(--gri); }
.gol { color: var(--gri); padding: 2rem 0; }


/* ---------- comparație asistent / avocat ---------- */
.comparatie { border: 1px solid var(--linie); background: var(--hartie-2); }
.file {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--linie); background: var(--hartie);
}
.file button {
  font: inherit; font-size: .92rem; text-align: left; cursor: pointer;
  padding: .9rem 1.2rem; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--gri);
}
.file button:hover { color: var(--caramiziu); }
.file button[aria-selected="true"] {
  background: var(--hartie-2); color: var(--inchis); border-bottom-color: var(--caramiziu);
}
.panou-comparatie { padding: 1.8rem; }
.panou-comparatie > p.situatie {
  font-family: Spectral, Georgia, serif; font-size: 1.15rem; color: var(--inchis);
  border-left: 3px solid var(--caramiziu); padding-left: 1rem; margin-bottom: 1.8rem; max-width: none;
}
.doua-coloane { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.doua-coloane > div { min-width: 0; }
.doua-coloane h3 { font-size: 1rem; margin-bottom: .2rem; }
.doua-coloane .sub { font-size: .82rem; color: var(--gri); margin-bottom: 1rem; display: block; }
.doua-coloane ul { margin: 0; padding-left: 1.1rem; }
.doua-coloane li { margin-bottom: .55rem; font-size: .94rem; }
.coloana-ai { border-top: 3px solid var(--linie); padding-top: 1rem; }
.coloana-ai li { color: var(--gri); }
.coloana-avocat { border-top: 3px solid var(--caramiziu); padding-top: 1rem; }
.miza {
  margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
  font-size: .95rem;
}
.miza strong { color: var(--caramiziu); }
@media (max-width: 760px) {
  .doua-coloane { grid-template-columns: 1fr; gap: 1.6rem; }
  .file button { flex: 1 1 100%; border-bottom: 1px solid var(--linie); }
}

/* ---------- canale de contact ---------- */
.canale { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; }
.canal { border-top: 3px solid var(--caramiziu); padding-top: 1rem; }
.canal h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.canal p { margin: 0 0 .4rem; font-size: .94rem; }
.canal .mare { font-family: Spectral, serif; font-size: 1.25rem; color: var(--inchis); }
.canal .mare a { text-decoration: none; }


/* ============================================================
   BANDA DE ANTET ÎN MIȘCARE
   Grafica de infrastructură trece în spatele meniului,
   pe toate paginile.
   ============================================================ */

.banda-antet {
  position: relative;
  background: linear-gradient(155deg, var(--caramiziu-4) 0%, var(--caramiziu) 42%, var(--caramiziu-5) 100%);
  border-bottom: 3px solid var(--ocru);
}
.banda-antet .fundal-masca {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.banda-antet .fundal {
  position: absolute; left: 0; right: 0; bottom: -4px;
  width: 100%; min-width: 900px; opacity: .42;
}
.banda-antet .spatiu { height: 104px; }

/* antetul devine transparent, așezat peste grafică */
.banda-antet .antet {
  position: relative; z-index: 2;
  background: transparent; backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.banda-antet .meniu a,
.banda-antet .meniu details.submeniu > summary { color: #F6E9E6; }
.banda-antet .meniu a:hover,
.banda-antet .meniu details.submeniu > summary:hover { color: #fff; border-bottom-color: var(--ocru); }
.banda-antet .meniu a[aria-current="page"] { color: #fff; border-bottom-color: var(--ocru); }
.banda-antet .meniu details.submeniu > summary::after { color: rgba(255,255,255,.6); }
.banda-antet .meniu .buton {
  background: var(--ocru); border-color: var(--ocru); color: #23150F;
}
.banda-antet .meniu .buton:hover { background: #fff; border-color: #fff; color: var(--caramiziu); }
.banda-antet .meniu-comutator { color: #fff; border-color: rgba(255,255,255,.4); }
.banda-antet .limbi a, .banda-antet .limbi span { color: rgba(255,255,255,.72); }
.banda-antet .limbi a:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.banda-antet .limbi span[aria-current] {
  color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28);
}
.banda-antet .meniu details.submeniu > div a { color: var(--cerneala); }

@media (max-width: 860px) {
  .banda-antet .spatiu { height: 68px; }
  .banda-antet .meniu { background: var(--caramiziu-5); border-bottom: none; }
  .banda-antet .meniu a { color: #F6E9E6; border-bottom-color: rgba(255,255,255,.15); }
  .banda-antet .meniu details.submeniu > summary { border-bottom-color: rgba(255,255,255,.15); }
  .banda-antet .meniu details.submeniu > div { border-left-color: rgba(255,255,255,.25); }
  .banda-antet .meniu details.submeniu > div a { color: #F6E9E6; }
  .banda-antet .meniu details.submeniu > div a:hover { background: rgba(255,255,255,.08); }
}

/* ---------- linie animată între secțiuni ---------- */
.linie-curge {
  height: 2px; border: none; margin: 0;
  background-image: linear-gradient(90deg, var(--caramiziu) 0 22px, transparent 22px 40px);
  background-size: 40px 2px;
  animation: curge-linie 1.8s linear infinite;
  opacity: .5;
}
@keyframes curge-linie { to { background-position: 40px 0; } }

/* ---------- apariție la derulare ---------- */
.apare { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.apare.vizibil { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .linie-curge { animation: none; }
  .apare { opacity: 1; transform: none; transition: none; }
}

/* ---------- culoare pe categorii ---------- */
.stire .domeniu { color: var(--petrol); }
.stire:nth-child(2n) .domeniu { color: var(--ocru); }
.stire:nth-child(3n) .domeniu { color: var(--verde); }

.practica { border-left: 3px solid transparent; padding-left: 1.2rem; transition: border-color .25s, background .25s; }
.practica:nth-child(1) { border-left-color: var(--caramiziu); }
.practica:nth-child(2) { border-left-color: var(--petrol); }
.practica:nth-child(3) { border-left-color: var(--verde); }
.practica:nth-child(4) { border-left-color: var(--ocru); }
.practica:nth-child(5) { border-left-color: var(--prun); }
.practica:hover { background: var(--hartie-2); }

.panou-date { border-top-color: var(--ocru); }
.panou-date dd { color: var(--caramiziu); }

.sectiune-inchisa {
  background: linear-gradient(140deg, var(--caramiziu-5) 0%, var(--inchis) 55%, #1A0F0D 100%);
}
.sectiune-inchisa h2 { color: #fff; }

.nota { border-left-color: var(--petrol); }
.canal:nth-child(2) { border-top-color: var(--petrol); }
.canal:nth-child(3) { border-top-color: var(--ocru); }
.coloana-ai { border-top-color: var(--petrol); }
.chat-mesaj.el { border-left: 3px solid var(--petrol); }
.subsol { background: linear-gradient(160deg, var(--inchis) 0%, var(--caramiziu-5) 100%); }
.subsol h4 { color: #fff; }
.infrastructura { background: var(--roz); }


/* ---------- etichete de domeniu, colorate ---------- */
.domenii { display: flex; flex-wrap: wrap; gap: .7rem; }
.domenii span {
  font-size: .9rem; padding: .5rem .95rem;
  color: var(--ton); background: var(--hartie-2);
  border: 1px solid var(--linie); border-left: 3px solid var(--ton);
}


/* ============================================================
   MENIU-TREN
   Elementele de meniu sunt vagoane pe o șină; submeniul apare
   pe linia următoare, ca o garnitură de metrou.
   ============================================================ */

.banda-antet .antet { position: relative; overflow: visible; }

/* șina pe care stau vagoanele */
.banda-antet .antet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 5px;
  border-top: 1.5px solid rgba(255,255,255,.45);
  border-bottom: 1.5px solid rgba(255,255,255,.45);
  pointer-events: none;
}

@media (min-width: 861px) {
  .banda-antet .meniu { align-items: flex-end; gap: .55rem; padding-bottom: 14px; }

  /* vagon */
  .banda-antet .meniu > a,
  .banda-antet .meniu details.submeniu > summary {
    position: relative;
    padding: .58rem .95rem .5rem;
    border: 1.4px solid rgba(255,255,255,.42);
    border-radius: 4px 4px 2px 2px;
    background: rgba(255,255,255,.08);
    border-bottom: 1.4px solid rgba(255,255,255,.42);
    transition: background .2s, border-color .2s;
  }
  /* geamul vagonului */
  .banda-antet .meniu > a::before,
  .banda-antet .meniu details.submeniu > summary::before {
    content: ""; position: absolute; left: 8px; right: 8px; top: 5px; height: 3px;
    background: rgba(255,255,255,.28); border-radius: 1px;
  }
  /* roțile */
  .banda-antet .meniu > a::after,
  .banda-antet .meniu details.submeniu > summary::after {
    content: ""; position: absolute; bottom: -8px; left: 10px; right: 10px; height: 7px;
    background:
      radial-gradient(circle 3.2px at 5px 3.4px, rgba(255,255,255,.8) 96%, transparent 98%),
      radial-gradient(circle 3.2px at calc(100% - 5px) 3.4px, rgba(255,255,255,.8) 96%, transparent 98%);
    color: transparent;
  }
  .banda-antet .meniu > a:hover,
  .banda-antet .meniu details.submeniu > summary:hover,
  .banda-antet .meniu details.submeniu[open] > summary {
    background: rgba(255,255,255,.2); border-color: #fff;
  }
  .banda-antet .meniu a[aria-current="page"] {
    background: rgba(255,255,255,.24); border-color: #fff;
  }
  .banda-antet .meniu .buton { border-radius: 4px 4px 2px 2px; padding: .58rem 1.1rem .5rem; }
  .banda-antet .meniu .buton::before { background: rgba(0,0,0,.16); }
  .banda-antet .meniu .buton::after {
    background:
      radial-gradient(circle 3.2px at 5px 3.4px, rgba(35,21,15,.55) 96%, transparent 98%),
      radial-gradient(circle 3.2px at calc(100% - 5px) 3.4px, rgba(35,21,15,.55) 96%, transparent 98%);
  }

  /* garnitura de metrou: submeniul pe linia următoare */
  .banda-antet .meniu details.submeniu { position: static; }
  .banda-antet .meniu details.submeniu > div {
    position: absolute; left: 0; right: 0; top: calc(100% + 30px);
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem;
    min-width: 0; background: none; border: none; box-shadow: none; padding: 0;
    z-index: 40;
  }
  /* șina garniturii */
  .banda-antet .meniu details.submeniu > div::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 4px;
    border-top: 1.2px solid rgba(255,255,255,.4);
    border-bottom: 1.2px solid rgba(255,255,255,.4);
  }
  .banda-antet .meniu details.submeniu > div a {
    position: relative; display: block;
    padding: .5rem .95rem .45rem; font-size: .89rem;
    background: rgba(255,255,255,.94); color: var(--caramiziu-5);
    border-radius: 4px 4px 2px 2px; border: none;
  }
  .banda-antet .meniu details.submeniu > div a::before {
    content: ""; position: absolute; left: 7px; right: 7px; top: 4px; height: 3px;
    background: rgba(135,39,31,.16); border-radius: 1px;
  }
  .banda-antet .meniu details.submeniu > div a::after {
    content: ""; position: absolute; bottom: -7px; left: 9px; right: 9px; height: 6px;
    background:
      radial-gradient(circle 2.8px at 4px 3px, rgba(255,255,255,.75) 96%, transparent 98%),
      radial-gradient(circle 2.8px at calc(100% - 4px) 3px, rgba(255,255,255,.75) 96%, transparent 98%);
  }
  .banda-antet .meniu details.submeniu > div a:hover {
    background: #fff; color: var(--caramiziu);
  }
  /* când e deschis un submeniu, banda crește ca să încapă garnitura */
  .banda-antet:has(details.submeniu[open]) .spatiu { height: 132px; }
}

/* fotografiile echipei: aceeași încadrare pentru toți */
.membru img { object-position: 50% 22%; }


/* ---------- fișele echipei ---------- */
.echipa { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 2rem 1.5rem; }
.membru .rol { font-size: .84rem; color: var(--caramiziu); margin: 0 0 .5rem; }
.membru .descriere { font-size: .87rem; color: var(--gri); line-height: 1.5; margin: 0; }
.membru .profil { margin: .5rem 0 0; font-size: .84rem; }
.membru .portret-lipsa {
  aspect-ratio: 3/4; width: 100%;
  background: repeating-linear-gradient(135deg, var(--roz) 0 10px, var(--hartie-2) 10px 20px);
  border: 1px solid var(--linie);
}


/* ============================================================
   CORECȚII PENTRU MOBIL
   Sigla se turtea din cauza flexbox-ului, iar textul alb
   nu avea contrast suficient peste grafica din antet.
   ============================================================ */

/* sigla nu se mai comprimă: păstrează proporția indiferent de lățime */
.sigla { flex: 0 0 auto; min-width: 0; }
.sigla img { width: auto; height: 46px; max-width: none; flex-shrink: 0; }

/* strat de întunecare peste grafică, ca textul alb din antet să se citească */
.banda-antet .fundal-masca::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(43,21,18,.45) 0%, rgba(43,21,18,.16) 55%, rgba(43,21,18,0) 100%);
}

@media (max-width: 860px) {
  .antet-interior { gap: .8rem; padding: .7rem 0; }
  .sigla img { height: 42px; }
  .banda-antet .fundal { opacity: .26; }
  .banda-antet .spatiu { height: 56px; }

  /* butonul de meniu: fundal propriu, nu doar contur */
  .banda-antet .meniu-comutator {
    background: rgba(255,255,255,.16);
    border: 1.5px solid rgba(255,255,255,.62);
    color: #fff; font-weight: 500; font-size: .95rem;
    padding: .55rem .9rem; border-radius: 3px;
  }

  /* panoul de meniu: fundal opac, închis, cu text alb */
  .banda-antet .meniu {
    background: #2B1512;
    border-top: 3px solid var(--ocru);
    padding: .4rem 1.25rem 1.4rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 18px 30px rgba(0,0,0,.35);
  }
  .banda-antet .meniu > a,
  .banda-antet .meniu details.submeniu > summary {
    color: #FFFFFF; font-size: 1rem; padding: .95rem 0;
    border-bottom: 1px solid rgba(255,255,255,.22);
  }
  .banda-antet .meniu details.submeniu > summary::after { color: rgba(255,255,255,.75); }
  .banda-antet .meniu > a[aria-current="page"] { color: var(--ocru); }

  /* submeniul: fundal puțin mai deschis, text alb, bară de accent */
  .banda-antet .meniu details.submeniu > div {
    background: #3B201A;
    border-left: 3px solid var(--ocru);
    margin: .2rem 0 .8rem;
    padding: .2rem 0;
  }
  .banda-antet .meniu details.submeniu > div a {
    color: #FFFFFF; font-size: .95rem; padding: .8rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .banda-antet .meniu details.submeniu > div a:last-child { border-bottom: none; }
  .banda-antet .meniu details.submeniu > div a:hover,
  .banda-antet .meniu details.submeniu > div a:active { background: rgba(255,255,255,.1); color: var(--ocru); }

  /* butonul de contact și comutatorul de limbă */
  .banda-antet .meniu .buton {
    margin-top: 1rem; text-align: center; font-size: 1rem; padding: .85rem 1.2rem;
    background: var(--ocru); border-color: var(--ocru); color: #23150F;
  }
  .banda-antet .limbi { margin-top: 1.1rem; gap: .4rem; }
  .banda-antet .limbi a, .banda-antet .limbi span {
    color: #FFFFFF; border-color: rgba(255,255,255,.35); padding: .5rem .75rem;
  }
  .banda-antet .limbi span[aria-current] { background: var(--ocru); color: #23150F; border-color: var(--ocru); }
}

@media (max-width: 400px) {
  .sigla img { height: 36px; }
  .banda-antet .meniu-comutator { padding: .5rem .7rem; font-size: .88rem; }
}