:root {
      --navy: #1f3a5f;
      --navy-soft: #2a4a7a;
      --pink: #ff6b8a;
      --paper: #f2f2f2;
      --white: #fff;
      --ink: #0f172a;
      --line: rgba(31, 58, 95, .16);
    }

    html { scroll-behavior: smooth; }
    .nav a.active { color: var(--pink); font-weight: 700; }
    .about-page { padding-top: 0px; }
    .about-page * { box-sizing: border-box; }

    .shell {
      width: min(1180px, calc(100% - 64px));
      margin: 0 auto;
    }

    .kicker {
      margin: 0 0 18px;
      color: var(--pink);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .section-heading {
      max-width: 820px;
      margin: 0 auto 18px;
      color: var(--navy);
      font-family: Borna, Inter, Arial, sans-serif;
      font-size: clamp(38px, 4.5vw, 56px);
      font-weight: 700;
      line-height: 1.08;
      text-align: center;
    }

    .section-intro {
      max-width: 780px;
      margin: 0 auto 54px;
      color: var(--navy-soft);
      font-size: 19px;
      line-height: 1.6;
      text-align: center;
    }

    /* Apertura propia de WHC: misión y visión tomadas como idea, no como plantilla. */
    .about-hero {
      padding: 92px 0 86px;
      overflow: hidden;
      background:
        radial-gradient(circle at 90% 10%, rgba(255,107,138,.26), transparent 25%),
        radial-gradient(circle at 72% 85%, rgba(255,255,255,.08), transparent 24%),
        var(--navy);
      color: var(--white);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
      gap: 70px;
      align-items: center;
    }

    .hero-copy h1 {
      max-width: 690px;
      margin: 0 0 28px;
      color: var(--white);
      font-family: Borna, Inter, Arial, sans-serif;
      font-size: clamp(46px, 5.8vw, 76px);
      font-weight: 700;
      line-height: 1.02;
    }

    .hero-copy h1 span { color: var(--pink); }

    .hero-copy > p:last-child {
      max-width: 620px;
      margin: 0;
      color: rgba(255,255,255,.84);
      font-size: 20px;
      line-height: 1.6;
    }

    .purpose-stack { display: grid; gap: 18px; }

    .purpose-card {
      position: relative;
      padding: 30px 30px 30px 92px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 18px;
      background: rgba(255,255,255,.09);
      backdrop-filter: blur(6px);
    }

    .purpose-icon {
      position: absolute;
      top: 29px;
      left: 27px;
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border-radius: 50%;
      background: var(--pink);
      color: var(--white);
      font-size: 21px;
      font-weight: 800;
    }

    .purpose-card h2 {
      margin: 0 0 8px;
      color: var(--pink);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .purpose-card p {
      margin: 0;
      color: var(--white);
      font-size: 18px;
      line-height: 1.5;
    }

    .values-section { padding: 94px 0 110px; background: var(--paper); }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 22px;
    }

    .value-card {
      position: relative;
      min-height: 270px;
      padding: 34px 30px 30px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--white);
      box-shadow: 0 16px 34px rgba(31,58,95,.06);
      grid-column: span 2;
    }

    .value-card:nth-child(4),
    .value-card:nth-child(5) { grid-column: span 3; }

    .value-card::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 7px;
      background: var(--pink);
      content: "";
    }

    .value-number {
      display: inline-grid;
      width: 52px;
      height: 52px;
      margin-bottom: 28px;
      place-items: center;
      border-radius: 50%;
      background: var(--navy);
      color: var(--white);
      font-size: 18px;
      font-weight: 800;
    }

    .value-card h3 {
      margin: 0 0 12px;
      color: var(--navy);
      font-size: 24px;
      line-height: 1.18;
    }

    .value-card p {
      margin: 0;
      color: var(--navy-soft);
      font-size: 17px;
      line-height: 1.55;
    }

    .board-section { padding: 96px 0 112px; background: var(--navy); }
    .board-section .section-heading { color: var(--white); }
    .board-section .section-intro { color: rgba(255,255,255,.76); }

    .board-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 34px;
    }

    .board-member { text-align: center; }

    .member-photo {
      width: 190px;
      height: 190px;
      margin: 0 auto 24px;
      overflow: hidden;
      border: 5px solid rgba(255,255,255,.18);
      border-radius: 50%;
      clip-path: circle(50% at 50% 50%);
      background: var(--navy-soft);
      box-shadow: 0 18px 35px rgba(0,0,0,.18);
    }

    .member-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      filter: grayscale(78%) saturate(65%) contrast(88%) brightness(1.06);
    }

    .member-photo--helena {
      padding: 18px;
      background: var(--navy-soft);
    }

    .member-photo-inner {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 50%;
      clip-path: circle(50% at 50% 50%);
      background: #eef2f5;
    }

    .member-photo--helena img {
      transform: scale(1.34);
      transform-origin: 50% 42%;
    }

    .board-member h3 {
      margin: 0 0 7px;
      color: var(--white);
      font-size: 21px;
      line-height: 1.25;
    }

    .board-member p {
      margin: 0;
      color: var(--pink);
      font-size: 17px;
    }

    .network-voices { padding: 100px 0 108px; background: var(--white); }

    .voices-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
    }

    .voice-card {
      padding: 30px 24px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--paper);
      text-align: center;
    }

    .voice-mark {
      display: grid;
      width: 74px;
      height: 74px;
      margin: 0 auto 22px;
      place-items: center;
      border-radius: 50%;
      background: var(--pink);
      color: var(--white);
      font-size: 23px;
      font-weight: 800;
    }

    .voice-card h3 {
      margin: 0 0 7px;
      color: var(--navy);
      font-size: 20px;
      line-height: 1.25;
    }

    .voice-role {
      margin: 0 0 10px;
      color: var(--pink);
      font-size: 16px;
      font-weight: 700;
    }

    .voice-org {
      margin: 0;
      color: var(--navy-soft);
      font-size: 14px;
      line-height: 1.4;
    }

    .organisations-section { padding: 94px 0 104px; background: var(--paper); }

    .org-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 20px;
    }

    .org-card {
      grid-column: span 2;
      display: flex;
      min-height: 290px;
      padding: 26px;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      border-radius: 16px;
      background: var(--white);
      box-shadow: 0 12px 30px rgba(31,58,95,.06);
    }

    .org-card:nth-child(4) { grid-column: 2 / span 2; }
    .org-card:nth-child(5) { grid-column: 4 / span 2; }

    .org-logo-box {
      display: grid;
      width: 100%;
      height: 154px;
      margin-bottom: 20px;
      padding: 20px 24px;
      place-items: center;
      overflow: visible;
      border-radius: 12px;
      background: #fff;
      border: 1px solid rgba(31,58,95,.08);
    }

    .org-logo {
      display: block;
      width: auto !important;
      height: auto !important;
      max-width: 100% !important;
      max-height: 112px !important;
      margin: auto;
      object-fit: contain !important;
      object-position: center !important;
    }

    /* Algunos logos tienen el arte muy pegado al borde del propio archivo.
       Un poco más de margen evita que visualmente parezcan cortados. */
    .org-card:first-child .org-logo {
      max-width: 88% !important;
      max-height: 106px !important;
    }

    .org-code {
      display: inline-flex;
      min-width: 44px;
      min-height: 28px;
      margin: 0 0 12px;
      padding: 5px 12px;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--navy);
      color: var(--white);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .06em;
    }

    .org-card h3 {
      margin: 0 0 6px;
      color: var(--navy);
      font-size: 18px;
      line-height: 1.25;
    }

    .org-card p {
      margin: 0;
      color: var(--navy-soft);
      font-size: 14px;
      line-height: 1.4;
    }

    .contact-band {
      padding: 84px 20px;
      background: var(--pink);
      text-align: center;
    }

    .contact-band h2 {
      max-width: 900px;
      margin: 0 auto 28px;
      color: var(--navy);
      font-size: clamp(38px, 4.8vw, 62px);
      line-height: 1.08;
    }

    .contact-link {
      display: inline-flex;
      min-height: 52px;
      padding: 12px 28px;
      align-items: center;
      border-radius: 999px;
      background: var(--navy);
      color: var(--white);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .14em;
      text-decoration: none;
      text-transform: uppercase;
    }

    .footer { margin-top: 0; }

    /* --- ACCESSIBILITY OVERRIDES --- */

    /* High Contrast Mode */
    body.high-contrast .about-hero,
    body.high-contrast .board-section,
    body.high-contrast .values-section,
    body.high-contrast .network-voices,
    body.high-contrast .organisations-section,
    body.high-contrast .contact-band {
      background: #000 !important;
    }

    body.high-contrast .section-heading,
    body.high-contrast .board-section .section-heading,
    body.high-contrast .contact-band h2 {
      color: #fff !important;
    }

    body.high-contrast .section-intro,
    body.high-contrast .board-section .section-intro {
      color: #ddd !important;
    }

    body.high-contrast .hero-copy h1,
    body.high-contrast .hero-copy > p:last-child {
      color: #fff !important;
    }

    body.high-contrast .hero-copy h1 span {
      color: #ffeb3b !important;
    }

    body.high-contrast .purpose-card,
    body.high-contrast .value-card,
    body.high-contrast .voice-card,
    body.high-contrast .org-card,
    body.high-contrast .org-logo-box {
      background: #111 !important;
      border-color: #ffeb3b !important;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
    }

    body.high-contrast .purpose-card h2,
    body.high-contrast .purpose-card p,
    body.high-contrast .value-card h3,
    body.high-contrast .value-card p,
    body.high-contrast .voice-card h3,
    body.high-contrast .voice-role,
    body.high-contrast .voice-org,
    body.high-contrast .org-card h3,
    body.high-contrast .org-card p,
    body.high-contrast .board-member h3 {
      color: #fff !important;
    }

    body.high-contrast .purpose-icon,
    body.high-contrast .value-number,
    body.high-contrast .voice-mark,
    body.high-contrast .org-code,
    body.high-contrast .board-member p {
      background: #ffeb3b !important;
      color: #000 !important;
    }

    body.high-contrast .board-member p {
      background: none !important;
      color: #ffeb3b !important;
    }

    body.high-contrast .contact-link {
      background: #ffeb3b !important;
      color: #000 !important;
    }

    /* White Text Mode */
    body.white-text-mode .about-hero,
    body.white-text-mode .board-section,
    body.white-text-mode .values-section,
    body.white-text-mode .network-voices,
    body.white-text-mode .organisations-section {
      background: #1f3a5f !important;
    }

    body.white-text-mode .contact-band {
      background: #2A4A7A !important;
    }

    body.white-text-mode .section-heading,
    body.white-text-mode .board-section .section-heading,
    body.white-text-mode .contact-band h2 {
      color: #fff !important;
    }

    body.white-text-mode .section-intro,
    body.white-text-mode .board-section .section-intro {
      color: rgba(255, 255, 255, .8) !important;
    }

    body.white-text-mode .purpose-card,
    body.white-text-mode .value-card,
    body.white-text-mode .voice-card,
    body.white-text-mode .org-card,
    body.white-text-mode .org-logo-box {
      background: #2A4A7A !important;
      border-color: #06b6d4 !important;
    }

    body.white-text-mode .purpose-card h2,
    body.white-text-mode .purpose-card p,
    body.white-text-mode .value-card h3,
    body.white-text-mode .value-card p,
    body.white-text-mode .voice-card h3,
    body.white-text-mode .voice-role,
    body.white-text-mode .voice-org,
    body.white-text-mode .org-card h3,
    body.white-text-mode .org-card p,
    body.white-text-mode .board-member h3 {
      color: #fff !important;
    }

    body.white-text-mode .purpose-icon,
    body.white-text-mode .value-number,
    body.white-text-mode .voice-mark,
    body.white-text-mode .org-code {
      background: #06b6d4 !important;
      color: #fff !important;
    }

    body.white-text-mode .board-member p {
      color: #06b6d4 !important;
    }

    body.white-text-mode .contact-link {
      background: #06b6d4 !important;
      color: #fff !important;
    }

    @media (max-width: 1050px) {
      .hero-grid { grid-template-columns: 1fr; }
      .purpose-stack { grid-template-columns: 1fr 1fr; }
      .board-grid, .voices-grid, .org-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .org-card,
      .org-card:nth-child(4),
      .org-card:nth-child(5) { grid-column: auto; }
      .org-card:last-child { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; }
    }

    @media (max-width: 760px) {
      .about-page { padding-top: 110px; }
      .shell { width: min(100% - 36px, 1180px); }
      .about-hero { padding: 70px 0; }
      .hero-grid { gap: 46px; }
      .purpose-stack { grid-template-columns: 1fr; }
      .values-grid { grid-template-columns: 1fr; }
      .value-card,
      .value-card:nth-child(4),
      .value-card:nth-child(5) { min-height: auto; grid-column: auto; }
      .board-grid, .voices-grid, .org-grid { grid-template-columns: 1fr; }
      .member-photo { width: 176px; height: 176px; }
      .org-card { min-height: 140px; }
      .org-card:last-child { grid-column: auto; width: 100%; }
    }