/* ==========================================================================
   PAGINILE DE SPECIALIZARE — un singur set de reguli pentru toate cele 7.

   Valorile sunt transpuse din 02–07. Pagina Femeia 40+ (08) foloseste exact
   aceleasi reguli; ce difera sta grupat la final, sub `.varianta-roz`, si
   schimba NUMAI culori. Nicio dimensiune si nicio spatiere nu se modifica.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · intro (firimituri + hero)
   -------------------------------------------------------------------------- */
.sp-intro { background: var(--ivory); }

.firimituri {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(24px, 3vw, 34px) clamp(20px, 4.5vw, 40px) 0;
  font-size: 12.5px; color: var(--text-secundar);
  display: flex; gap: 9px; flex-wrap: wrap;
}
/* Tinta de atingere pentru linkuri secundare de navigare: minim 24px.
   Textul are 17px la 12.5px, deci 4px sus si jos. Fara efect pe inaltimea
   randului, fiindca `.firimituri` are `align-items` implicit stretch. */
.firimituri a, .firimituri__curent { padding: 4px 0; }
.firimituri a { color: var(--text-secundar); transition: color .18s ease; }
.firimituri a:hover { color: var(--verde-profund); }
.firimituri__curent { color: var(--carbune); }

.sp-intro__inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(30px, 4vw, 52px) clamp(20px, 4.5vw, 40px) clamp(44px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(36px, 5vw, 60px);
  align-items: center;
}
.sp-intro__eticheta { margin-bottom: 22px; }
.sp-intro__titlu {
  font-size: var(--fs-h1);
  line-height: 1.1;              /* 1.1 aici, nu 1.08 ca pe prima pagina */
  letter-spacing: var(--ls-h1);
  margin: 0 0 24px;
}
.sp-intro__paragraf {
  font-size: clamp(15.5px, 1.3vw, 17px); line-height: var(--lh-paragraf);
  color: var(--text-mediu); margin: 0; max-width: 56ch;
}
.sp-intro__paragraf--ultim { margin-bottom: 30px; }
.sp-intro__actiuni { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.sp-intro__media { min-width: 0; height: clamp(360px, 44vw, 520px); }
.sp-intro__media > * { width: 100%; height: 100%; }

/* Eticheta de sectiune, identica in patru blocuri. */
.sp-eticheta { display: block; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   2 · pentru cine este
   -------------------------------------------------------------------------- */
.sp-pentru-cine { background: var(--alb); }
.sp-pentru-cine__inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(56px, 8vw, 92px) clamp(20px, 4.5vw, 40px);
}
.sp-pentru-cine__antet { max-width: 720px; margin-bottom: 42px; }
.sp-pentru-cine__titlu { margin: 0; }

.sp-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2px 40px;
}
.sp-lista__item {
  display: flex; gap: 14px; padding: 17px 0;
  border-top: 1px solid var(--bord-fin);
  font-size: 15.5px; line-height: 1.5; color: var(--carbune);
}
.sp-lista__marcaj { color: var(--auriu); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   3 · ce influenteaza / ce protejam
   -------------------------------------------------------------------------- */
.sp-cauze { background: var(--bej); }
.sp-cauze__inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(56px, 8vw, 92px) clamp(20px, 4.5vw, 40px);
}
.sp-cauze__antet { max-width: 760px; margin-bottom: 44px; }
.sp-cauze__titlu { margin: 0 0 20px; }
.sp-cauze__lead {
  font-size: clamp(15.5px, 1.3vw, 16.5px); line-height: var(--lh-paragraf);
  color: var(--text-mediu); margin: 0; max-width: 60ch;
}
.sp-cauze__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 26px 34px;
}
.sp-reper { border-top: 1px solid var(--bord-card); padding: 20px 0 4px; }
.sp-reper__titlu {
  font-family: var(--font-text); font-weight: 600; font-size: 16px;
  color: var(--verde-profund); margin: 0 0 10px;
}
.sp-reper__text { font-size: 14.5px; line-height: 1.6; color: var(--text-card); margin: 0; }

/* --------------------------------------------------------------------------
   4 · cum lucram (trei etape) — ramane pe verde si in varianta roz
   -------------------------------------------------------------------------- */
.sp-proces { background: var(--verde-profund); color: var(--ivory-corp); }
.sp-proces__inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(56px, 8vw, 92px) clamp(20px, 4.5vw, 40px);
}
.sp-proces__antet { max-width: 720px; margin-bottom: 48px; }
.sp-proces__eticheta { display: block; margin-bottom: 16px; }
.sp-proces__titlu { color: var(--ivory-titlu); margin: 0; }
.sp-proces__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 30px 36px;
}
.sp-etapa {
  border-top: 1px solid color-mix(in srgb, var(--ivory-corp) 24%, transparent);
  padding: 26px 0 4px;
}
.sp-etapa__nr {
  font-family: var(--font-titlu); font-size: 30px;
  color: var(--auriu-pe-verde); margin-bottom: 14px;
}
.sp-etapa__titlu {
  font-family: var(--font-text); font-weight: 600; font-size: 17px;
  color: var(--ivory-titlu); margin: 0 0 12px;
}
.sp-etapa__text {
  font-size: 15px; line-height: 1.6; margin: 0 0 16px;
  color: color-mix(in srgb, var(--ivory-corp) 68%, transparent);
}
.sp-etapa__rezultat {
  font-size: 13px; line-height: 1.55; color: var(--auriu-pe-verde); margin: 0;
}

/* --------------------------------------------------------------------------
   5 · ce inseamna progres
   -------------------------------------------------------------------------- */
.sp-rezultate { background: var(--alb); }
.sp-rezultate__inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(56px, 8vw, 92px) clamp(20px, 4.5vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 5vw, 60px);
  align-items: center;
}
.sp-rezultate__media { min-width: 0; height: clamp(340px, 40vw, 460px); }
.sp-rezultate__media > * { width: 100%; height: 100%; }
.sp-rezultate__titlu { margin: 0 0 22px; }
.sp-rezultate__lista { display: flex; flex-direction: column; gap: 0; margin-bottom: 26px; }
.sp-rezultate__item {
  display: flex; gap: 14px; padding: 15px 0;
  border-top: 1px solid var(--bord-fin);
  font-size: 15.5px; line-height: 1.5; color: var(--carbune);
}
.sp-rezultate__item--ultim { border-bottom: 1px solid var(--bord-fin); }
.sp-rezultate__nota {
  font-size: 12.5px; line-height: 1.6; color: var(--text-secundar);
  margin: 0; max-width: 60ch;
}

/* --------------------------------------------------------------------------
   6 · faq — acordeonul e in components.css, aici doar cadrul sectiunii
   -------------------------------------------------------------------------- */
.sp-faq { background: var(--ivory); }
.sp-faq__inner {
  max-width: var(--container-faq); margin: 0 auto;
  padding: clamp(56px, 8vw, 92px) clamp(20px, 4.5vw, 40px);
}
.sp-faq__antet { margin-bottom: 38px; }
.sp-faq__titlu { margin: 0; }

/* Link intern in raspunsurile de FAQ */
.link-intern { color: var(--verde-profund); text-decoration: underline; }

/* --------------------------------------------------------------------------
   7 · alte directii de lucru
   -------------------------------------------------------------------------- */
.alte-directii {
  background: var(--alb);
  border-top: 1px solid color-mix(in srgb, var(--carbune) 8%, transparent);
}
.alte-directii__inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) clamp(20px, 4.5vw, 40px);
}
.alte-directii__titlu {
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2;
  letter-spacing: normal;        /* referinta nu declara letter-spacing aici */
  color: var(--verde-profund); margin: 0 0 28px;
}
.alte-directii__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 2px 30px;
}
.alta-directie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 18px 0;
  border-top: 1px solid color-mix(in srgb, var(--carbune) 14%, transparent);
  font-size: 15.5px; color: var(--carbune);
  transition: color .18s ease;
}
.alta-directie:hover { color: var(--verde-profund); }
.alta-directie__sageata { color: var(--auriu); }

/* Sectiunea de programare pe paginile de specializare are 92px, nu 96px. */
.cta-final--compact .cta-final__inner { padding: clamp(56px, 8vw, 92px) clamp(20px, 4.5vw, 40px); }

/* ==========================================================================
   VARIANTA ROZ — exclusiv pagina Femeia 40+.
   Aceeasi structura, aceleasi dimensiuni. Se schimba numai culorile, exact
   cele din 08-femeia-40-plus.html. Butoanele principale raman verzi, iar
   sectiunea de proces ramane pe fundal verde.
   ========================================================================== */

/* intro */
.varianta-roz .sp-intro { background: var(--roz-pudrat); }
.varianta-roz .firimituri,
.varianta-roz .firimituri a { color: var(--maro-breadcrumb); }
.varianta-roz .firimituri a:hover { color: var(--verde-profund); }
.varianta-roz .firimituri__curent { color: var(--maro-titlu); }
.varianta-roz .sp-intro__eticheta::before { background: var(--roz-accent); }
.varianta-roz .sp-intro__eticheta .eticheta { color: var(--roz-eticheta); }
.varianta-roz .sp-intro__titlu { color: var(--maro-titlu); margin-bottom: 22px; }
.varianta-roz .sp-intro__paragraf { color: var(--maro-text); }
.varianta-roz .sp-intro__paragraf--lead { line-height: 1.6; font-weight: 500; margin-bottom: 18px; }
.varianta-roz .sp-intro__paragraf--ultim {
  font-size: clamp(15.5px, 1.3vw, 16.5px); line-height: var(--lh-paragraf); margin-bottom: 30px;
}

/* pentru cine este — titlul ramane verde, ca in referinta */
.varianta-roz .sp-eticheta { color: var(--roz-eticheta); }
.varianta-roz .sp-lista__marcaj { color: var(--roz-accent); }

/* ce protejam */
.varianta-roz .sp-cauze { background: var(--roz-pudrat); }
.varianta-roz .sp-cauze__titlu { color: var(--maro-titlu); }
.varianta-roz .sp-cauze__lead { color: var(--maro-text); }
.varianta-roz .sp-reper { border-top-color: color-mix(in srgb, var(--maro-titlu) 25%, transparent); }
.varianta-roz .sp-reper__text { color: var(--maro-text); }

/* cum lucram — fundal verde, accente roz */
.varianta-roz .sp-proces__eticheta { color: var(--roz-pe-verde); }
.varianta-roz .sp-etapa__nr { color: var(--roz-pe-verde); }
.varianta-roz .sp-etapa__rezultat { color: var(--roz-pe-verde); }

/* faq */
.varianta-roz .om-faq-plus { color: var(--roz-accent); }