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

  :root {
      --navy: rgb(17, 32, 63);
      --blue: rgb(29, 71, 126);
      --blue-dk: rgb(30, 58, 138);
      --accent: rgb(75, 158, 217);
      --teal: rgb(6, 50, 49);
      --purple: rgb(61, 45, 83);
      --mauve: rgb(166, 147, 184);
      --white: #ffffff;
      --bg: #f5f6f8;
      --font-h: 'Poppins', sans-serif;
      --font-b: 'Open Sans', sans-serif;
      --max-w: 1280px;
      --pad-x: 80px;
      --gap-sec: 72px;
  }

  body {
      font-family: var(--font-b);
      background: #F1F7FF;
      color: var(--navy)
  }

  /* ── utilidades ── */
  .sf-section {
      width: 100%;
      padding: 0 var(--pad-x)
  }

  .sf-inner {
      max-width: var(--max-w);
      margin: 0 auto
  }

  .sf-full {
      width: 100%;
      padding: 0
  }

  .gap {
      height: var(--gap-sec)
  }

  .gap-sm {
      height: 40px
  }

  .sec-title {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 600;
      color: var(--blue);
      line-height: 1.2
  }

  /* ══════════════════════════════════════════
       1. HEADER — Trabaja con FUNDES
    ══════════════════════════════════════════ */
  .tcf-header {
      padding: 48px var(--pad-x) 0
  }

  .tcf-header__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px
  }

  .tcf-header__titulo {
      font-family: var(--font-h);
      font-size: 48px;
      font-weight: 600;
      color: var(--blue);
      line-height: 1.2
  }

  .tcf-header__desc {
      font-size: 18px;
      font-weight: 400;
      color: var(--teal);
      line-height: 1.7;
      max-width: 100%;
  }

  /* ══════════════════════════════════════════
       2. LISTA DE VACANTES (reutiliza estilos de page-vacantes)
    ══════════════════════════════════════════ */
  .vacantes-block {
      padding: 0 var(--pad-x)
  }

  .vacantes-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 24px
  }

  .vacantes-header {
      display: flex;
      flex-direction: column;
      gap: 16px
  }

  .vacantes-titulo {
      font-family: var(--font-h);
      font-size: 28px;
      font-weight: 700;
      color: var(--blue);
      text-align: center
  }

  /* Filtros */
  .filtros-row {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap
  }

  .filtro-select-wrap {
      position: relative;
      flex: 1 1 180px;
      min-width: 140px
  }

  .filtro-select-wrap select {
      width: 100%;
      appearance: none;
      -webkit-appearance: none;
      padding: 10px 36px 10px 14px;
      font-family: var(--font-b);
      font-size: 15px;
      color: rgba(17, 32, 63, .6);
      background: var(--white);
      border: 1px solid var(--navy);
      border-radius: 8px;
      outline: none;
      cursor: pointer;
      transition: border-color .2s
  }

  .filtro-select-wrap select:focus {
      border-color: var(--accent);
      color: var(--navy)
  }

  .filtro-select-wrap select.active {
      color: var(--navy);
      font-weight: 600
  }

  .filtro-select-wrap::after {
      content: '';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 6px;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.5L4 3.5L7 0.5' stroke='%2311203F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: contain
  }

  /* Grid vacantes */
  .jobs-grid {
      display: flex;
      flex-direction: column;
      gap: 16px
  }

  .jobs-row {
      display: flex;
      gap: 16px;
      align-items: flex-start
  }

  .job-card {
      flex: 0 0 calc(33.333% - 11px);
      background: var(--navy);
      border-radius: 12px;
      padding: 24px 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      cursor: pointer;
      transition: transform .25s, box-shadow .25s;
      min-height: 160px;
      justify-content: space-between
  }

  .job-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(17, 32, 63, .3)
  }

  .job-card__top {
      display: flex;
      flex-direction: column;
      gap: 8px
  }

  .job-card__title {
      font-family: var(--font-h);
      font-size: 18px;
      font-weight: 700;
      color: var(--white);
      line-height: 1.3;
      text-align: center
  }

  .job-card__location {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px
  }

  .job-card__flag {
      font-size: 18px;
      line-height: 1
  }

  .job-card__city {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, .85)
  }

  .job-card__footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px
  }

  .job-card__ver-mas {
      font-size: 14px;
      font-weight: 600;
      color: var(--white)
  }

  .job-card__chevron {
      font-size: 20px;
      color: var(--white);
      transition: transform .25s
  }

  .job-card.expanded .job-card__chevron {
      transform: rotate(90deg)
  }

  .job-card__detail {
      display: none;
      flex-direction: column;
      gap: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, .2)
  }

  .job-card.expanded .job-card__detail {
      display: flex
  }

  .job-card__detail-text {
      font-size: 13px;
      font-weight: 400;
      color: rgba(255, 255, 255, .85);
      line-height: 1.6
  }

  .job-card__detail-btn {
      display: inline-flex;
      align-items: center;
      padding: 8px 16px;
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 700;
      color: var(--navy);
      background: rgba(255, 255, 255, .15);
      border: none;
      border-radius: 6px;
      cursor: pointer;
      text-decoration: none;
      width: fit-content;
      transition: background .2s
  }

  .job-card__detail-btn:hover {
      background: rgba(255, 255, 255, .3)
  }

  /* Ver más vacantes */
  .vacantes-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px
  }

  .btn-ver-mas-vacantes {
      display: inline-flex;
      align-items: center;
      padding: 12px 28px;
      font-family: var(--font-b);
      font-size: 16px;
      font-weight: 600;
      color: var(--navy);
      background: transparent;
      border: 2px solid var(--navy);
      border-radius: 8px;
      cursor: pointer;
      text-decoration: none;
      transition: background .2s, color .2s
  }

  .btn-ver-mas-vacantes:hover {
      background: var(--navy);
      color: var(--white)
  }

  .vacantes-empty {
      text-align: center;
      font-size: 16px;
      color: rgba(17, 32, 63, .5);
      display: none
  }

  /* ══════════════════════════════════════════
       3. ¿QUIERES SUMARTE AL EQUIPO CONSULTOR?
    ══════════════════════════════════════════ */
  .consultor-block {
      padding: 0 var(--pad-x)
  }

  .consultor-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      align-items: stretch;
      border-radius: 16px;
      overflow: hidden;
      min-height: 400px
  }

  .consultor-foto {
      flex: 0 0 55%
  }

  .consultor-foto img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
  }

  .consultor-texto {
      flex: 1;
      background: linear-gradient(180deg, #027592 0%, #1D477E 100%);
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 20px
  }

  .consultor-texto__titulo {
      font-family: var(--font-h);
      font-size: 32px;
      font-weight: 700;
      color: var(--white);
      line-height: 1.25
  }

  .consultor-texto__desc {
      font-size: 18px;
      font-weight: 400;
      color: rgba(255, 255, 255, .88);
      line-height: 1.65
  }

  .btn-aplicar {
      display: inline-flex;
      align-items: center;
      padding: 12px 28px;
      font-family: var(--font-b);
      font-size: 16px;
      font-weight: 600;
      color: var(--navy);
      background: var(--accent);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      text-decoration: none;
      width: fit-content;
      transition: opacity .2s
  }

  .btn-aplicar:hover {
      opacity: .85
  }

  /* ══════════════════════════════════════════
       4. BENEFICIOS (4 cards navy)
    ══════════════════════════════════════════ */
  .beneficios-block {
      padding: 0 var(--pad-x)
  }

  .beneficios-inner {
      max-width: var(--max-w);
      margin: 0 auto
  }

  .beneficios-header {
      margin-bottom: 32px
  }

  .beneficios-header__titulo {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 600;
      color: var(--blue);
      margin-bottom: 12px
  }

  .beneficios-header__desc {
      font-size: 18px;
      font-weight: 400;
      color: var(--navy);
      line-height: 1.65
  }

  .beneficios-header__desc strong {
      font-weight: 700
  }

  .beneficios-grid {
      display: flex;
      gap: 16px;
      flex-wrap: wrap
  }

  .beneficio-card {
      flex: 1 1 220px;
      background: var(--navy);
      border-radius: 8px;
      padding: 31px 23px 67px 23px;
      display: flex;
      flex-direction: column;
      gap: 16px
  }

  .beneficio-card__icono {
      width: 72px;
      height: 72px;
      background: rgba(255, 255, 255, .12);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center
  }

  .beneficio-card__icono svg {
      width: 24px;
      height: 24px
  }

  .beneficio-card__titulo {
      font-size: 20px;
      font-weight: 700;
      color: var(--white);
      line-height: 1.2
  }

  .beneficio-card__titulo span {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, .75);
      margin-top: 10px;
  }

  .beneficio-card__desc {
      font-size: 15px;
      font-weight: 400;
      color: rgba(255, 255, 255, .85);
      line-height: 1.6
  }

  /* ══════════════════════════════════════════
       5. ALIANZAS (ANCHO COMPLETO, fondo mauve)
    ══════════════════════════════════════════ */
  .alianzas-block {
      width: 100%;
      background: var(--mauve);
      padding: 64px var(--pad-x)
  }

  .alianzas-inner {
      max-width: var(--max-w);
      margin: 0 auto
  }

  .alianzas-titulo {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 600;
      color: var(--navy);
      line-height: 1.3;
      text-align: center;
      margin-bottom: 40px
  }

  .alianzas-cards {
      display: flex;
      gap: 24px;
      flex-wrap: wrap
  }

  .alianza-card {
      flex: 1 1 280px;
      background: var(--white);
      border-radius: 8px;
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: 0 4px 16px rgba(17, 32, 63, .1)
  }

  .alianza-card__logo {
      height: 40px;
      display: flex;
      align-items: center
  }

  .alianza-card__logo img {
      max-height: 100%;
      width: auto;
      object-fit: contain
  }

  .alianza-card__logo-text {
      font-family: var(--font-h);
      font-size: 22px;
      font-weight: 700;
      color: var(--navy)
  }

  .alianza-card__desc {
      font-size: 15px;
      font-weight: 400;
      color: var(--navy);
      line-height: 1.6
  }

  /* ══════════════════════════════════════════
       6. COMPOSICIÓN + GEO + EXPERTISE
    ══════════════════════════════════════════ */
  .equipo-block {
      padding: 0 var(--pad-x)
  }

  .equipo-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--gap-sec)
  }

  /* Composición */
  .composicion-barra {
      display: flex;
      border-radius: 12px;
      overflow: hidden;
      height: 200px
  }

  .composicion-barra__mujeres {
      flex: 0 0 64%;
      background: var(--purple);
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 32px
  }

  .composicion-barra__hombres {
      flex: 1;
      background: var(--navy);
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 32px
  }

  .composicion-barra__icono {
      font-size: 40px;
      color: var(--white)
  }

  .composicion-barra__info {
      display: flex;
      flex-direction: column
  }

  .composicion-barra__pct {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 500;
      color: var(--white)
  }

  .composicion-barra__label {
      font-size: 17px;
      font-weight: 600;
      color: var(--white)
  }

  /* Distribución geo */
  .geo-section {
      display: flex;
      flex-direction: column;
      gap: 32px
  }

  .geo-grid {
      display: flex;
      gap: 32px;
      align-items: flex-end;
      flex-wrap: wrap
  }

  .geo-item {
      flex: 1 1 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      text-align: center
  }

  .geo-item__mapa {
      width: 100%;
      max-width: 403px;
      aspect-ratio: 1;
      object-fit: contain;
      height: 252px;
  }

  .geo-item__pct {
      font-family: var(--font-h);
      font-size: 48px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1;
      margin-top: 30px;
  }

  .geo-item__label {
      font-size: 26px;
      font-weight: 600;
      color: var(--navy)
  }

  /* Expertise donut */
  .expertise-section {
      display: flex;
      flex-direction: column;
      gap: 32px
  }

  .expertise-inner {
      display: flex;
      align-items: center;
      gap: 64px;
      flex-wrap: wrap
  }

  .donut-wrap {
      flex-shrink: 0;
      position: relative;
      width: 260px;
      height: 260px
  }

  .donut-wrap svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg)
  }

  .expertise-leyenda {
      display: flex;
      flex-direction: column;
      gap: 20px
  }

  .leyenda-item {
      display: flex;
      align-items: center;
      gap: 14px
  }

  .leyenda-item__dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      flex-shrink: 0
  }

  .leyenda-item__info {
      display: flex;
      flex-direction: column
  }

  .leyenda-item__pct {
      font-family: var(--font-h);
      font-size: 22px;
      font-weight: 600;
      color: var(--navy)
  }

  .leyenda-item__label {
      font-size: 18px;
      font-weight: 600;
      color: var(--navy)
  }

  /* ══════════════════════════════════════════
       7. COMPROMISOS
    ══════════════════════════════════════════ */
  .compromisos-block {
      padding: 0 var(--pad-x)
  }

  .compromisos-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 32px
  }

  .compromisos-titulo {
      font-family: var(--font-h);
      font-size: 32px;
      font-weight: 600;
      color: var(--blue)
  }

  .compromisos-img {
      max-width: 100%;
  }

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

  /* ══════════════════════════════════════════
       8. FORMULARIO RRHH
    ══════════════════════════════════════════ */
  .form-block {
      padding: 0 var(--pad-x)
  }

  .form-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 24px
  }

  .form-titulo {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: var(--blue);
      text-align: center
  }

  .form-desc {
      font-size: 18px;
      font-weight: 400;
      color: var(--navy);
      line-height: 1.65;
      max-width: 700px
  }

  .form-desc strong {
      font-weight: 700
  }

  .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      background: #F1F7FF;
  }

  .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px
  }

  .form-group.full {
      grid-column: 1/-1
  }

  .form-group label {
      font-size: 14px;
      font-weight: 600;
      color: var(--blue)
  }

  .form-group input,
  .form-group textarea {
      width: 100%;
  }

  .form-group input,
  .form-group textarea {
      padding: 12px 14px;
      font-family: var(--font-b);
      font-size: 16px;
      color: var(--navy);
      background: var(--white);
      border: 1px solid rgba(17, 32, 63, .3);
      border-radius: 8px;
      outline: none;
      transition: border-color .2s
  }

  .form-group input:focus,
  .form-group textarea:focus {
      border-color: var(--accent)
  }

  .form-group textarea {
      resize: vertical;
      min-height: 120px
  }

  .btn-enviar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 32px;
      font-family: var(--font-b);
      font-size: 18px;
      font-weight: 600;
      color: var(--white);
      background: var(--accent);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: opacity .2s;
      align-self: center
  }

  .btn-enviar:hover {
      opacity: .85
  }

  /* ══════════════════════════════════════════
       9. CONOCE MÁS SOBRE FUNDES (CTA final)
    ══════════════════════════════════════════ */
  .cta-final {
      width: 100%;
      background: var(--navy);
      padding: 138px var(--pad-x);
      position: relative;
      overflow: hidden;
      text-align: center
  }

  .cta-final::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("/wp-content/uploads/2026/03/patron-de-lineas-blanco.png") no-repeat left -24% top 83%,
          url("/wp-content/uploads/2026/03/patron-de-lineas-blanco.png") no-repeat right -7% bottom 104%;
      pointer-events: none;
      opacity: 0.15;
  }

  .cta-final__titulo {
      font-family: var(--font-h);
      font-size: 40px;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 32px;
      position: relative
  }

  .btn-cta-final {
      display: inline-flex;
      align-items: center;
      padding: 14px 36px;
      font-family: var(--font-b);
      font-size: 18px;
      font-weight: 600;
      color: var(--navy);
      background: var(--accent);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      text-decoration: none;
      transition: opacity .2s;
      position: relative
  }

  .btn-cta-final:hover {
      opacity: .85
  }

  /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
  @media(max-width:1024px) {
      :root {
          --pad-x: 40px;
          --gap-sec: 56px
      }

      .tcf-header__titulo {
          font-size: 36px
      }

      .job-card {
          flex: 0 0 calc(50% - 8px)
      }

      .jobs-row {
          flex-wrap: wrap
      }

      .consultor-foto {
          flex: 0 0 50%
      }

      .beneficio-card {
          flex: 1 1 calc(50% - 8px)
      }

      .alianza-card {
          flex: 1 1 calc(50% - 12px)
      }

      .expertise-inner {
          gap: 32px
      }
  }

  @media(max-width:768px) {
      :root {
          --pad-x: 20px;
          --gap-sec: 48px
      }

      .tcf-header__titulo {
          font-size: 28px
      }

      .tcf-header__desc {
          font-size: 16px
      }

      /* Vacantes */
      .filtros-row {
          flex-direction: column;
          align-items: stretch
      }

      .filtro-select-wrap {
          max-width: 100%
      }

      .jobs-row {
          flex-direction: column
      }

      .job-card {
          flex: 0 0 100%;
          width: 100%;
      }

      /* Consultor */
      .consultor-inner {
          flex-direction: column
      }

      .consultor-foto {
          flex: 0 0 240px
      }

      .consultor-texto__titulo {
          font-size: 24px
      }

      .consultor-texto__desc {
          font-size: 16px
      }

      /* Beneficios */
      .beneficios-header__titulo {
          font-size: 26px
      }

      .beneficio-card {
          flex: 1 1 100%
      }

      /* Alianzas */
      .alianzas-titulo {
          font-size: 26px
      }

      .alianza-card {
          flex: 1 1 100%
      }

      /* Equipo */
      .composicion-barra {
          flex-direction: column;
          height: auto
      }

      .composicion-barra__mujeres,
      .composicion-barra__hombres {
          flex: 0 0 auto;
          padding: 20px 24px
      }

      .geo-item {
          flex: 1 1 100%
      }

      .expertise-inner {
          flex-direction: column;
          gap: 24px
      }

      .donut-wrap {
          width: 200px;
          height: 200px
      }

      /* Form */
      .form-grid {
          grid-template-columns: 1fr
      }

      .form-group.full {
          grid-column: 1
      }

      .form-titulo {
          font-size: 26px;
          text-align: left
      }

      /* CTA */
      .cta-final__titulo {
          font-size: 28px
      }

      .filtro-select-wrap::after {
          content: '';
          position: absolute;
          right: 12px;
          top: 45%;
          transform: translateY(-50%);
          width: 10px;
          height: 6px;
          pointer-events: none;
          background-image: url(data:image/svg+xml,%3Csvg viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.5L4 3.5L7 0.5' stroke='%2311203F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E);
          background-repeat: no-repeat;
          background-size: contain;
      }

      .filtro-select-wrap {
          position: relative;
          flex: 1 1 50px;
          min-width: 140px;
      }
  }

  @media(max-width:480px) {

      .beneficio-card,
      .alianza-card {
          flex: 1 1 100%
      }

      .geo-item__pct {
          font-size: 36px
      }

      .geo-item__label {
          font-size: 20px
      }
  }






  /* Expertise — igual ancho que geo-grid */
  .expertise-section {
      display: flex;
      flex-direction: column;
      gap: 32px;
  }

  .expertise-inner {
      display: flex;
      align-items: center;
      gap: 64px;
      flex-wrap: wrap;
  }

  /* Canvas donut — tamaño real del diseño */
  .donut-wrap {
      flex-shrink: 0;
      width: 560px;
      height: 560px;
  }

  .donut-wrap canvas {
      width: 100%;
      height: 100%;
      display: block;
  }

  /* Leyenda */
  .expertise-leyenda {
      display: flex;
      flex-direction: column;
      gap: 28px;
  }

  .leyenda-item {
      display: flex;
      align-items: center;
      gap: 16px;
  }

  .leyenda-item__dot {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      flex-shrink: 0;
  }

  .leyenda-item__label {
      font-size: 20px;
      font-weight: 600;
      color: var(--navy);
      line-height: 1.3;
  }

  @media (max-width: 768px) {
      .donut-wrap {
          width: 260px;
          height: 260px;
      }

      .expertise-inner {
          flex-direction: column;
          gap: 32px;
      }

      .leyenda-item__label {
          font-size: 17px;
      }
  }

  /* ── Barra composición ───────────────────────── */
  .composicion-barra {
      display: flex;
      border-radius: 16px;
      overflow: hidden;
      width: 100%;
  }

  /* Sección Mujeres */
  .composicion-barra__mujeres {
      /* flex-basis dinámico desde PHP — ej: flex: 0 0 64% */
      background: rgb(61, 45, 83);
      /* morado oscuro del Figma */
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 32px 40px;
      justify-content: center;
  }

  /* Sección Hombres */
  .composicion-barra__hombres {
      flex: 1;
      /* ocupa el resto */
      background: #1D477E;
      /* navy oscuro del Figma */
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 32px 40px;
      justify-content: center;
  }

  /* Figura humana PNG */
  .composicion-barra__figura {
      height: 80px;
      /* altura fija, igual que en Figma */
      width: auto;
      object-fit: contain;
      flex-shrink: 0;
      filter: brightness(0) invert(1);
      /* fuerza blanco si el PNG no es blanco puro */
  }

  /* Info: % + label apilados */
  .composicion-barra__info {
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  /* Número grande */
  .composicion-barra__pct {
      font-family: var(--font-h);
      font-size: 48px;
      font-weight: 700;
      color: var(--white);
      line-height: 1;
      letter-spacing: -0.5px;
  }

  /* Etiqueta debajo */
  .composicion-barra__label {
      font-family: var(--font-b);
      font-size: 18px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1;
  }

  /* ── Responsive ─────────────────────────────── */
  @media (max-width: 1024px) {
      .composicion-barra__pct {
          font-size: 36px;
      }

      .composicion-barra__figura {
          height: 64px;
      }

      .composicion-barra__mujeres,
      .composicion-barra__hombres {
          padding: 24px 28px;
          gap: 16px;
      }
  }

  @media (max-width: 768px) {
      .composicion-barra {
          flex-direction: column;
          border-radius: 12px;
      }

      /* En móvil cada sección ocupa el ancho por el % real */
      .composicion-barra__mujeres {
          flex: 0 0 auto !important;
          /* override del inline style */
          width: 100%;
      }

      .composicion-barra__hombres {
          width: 100%;
      }

      .composicion-barra__pct {
          font-size: 32px;
      }

      .composicion-barra__figura {
          height: 56px;
      }

      .composicion-barra__mujeres,
      .composicion-barra__hombres {
          padding: 20px 24px;
      }
  }