/* ============================================================
       Estilos locales de la página «Nosotros».
       Usamos tokens de tokens.css — por lo que el cambio de marca
       se aplicará aquí automáticamente.
       ============================================================ */

    /* ------- Hero «Nosotros» — estrecho, énfasis en tipografía ------- */
    .about-hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      color: #fff;
      padding-block: var(--space-10) var(--space-12);
    }
    @media (min-width: 768px) {
      .about-hero { padding-block: var(--space-16) var(--space-20); }
    }
    .about-hero::before {
      content: "";
      position: absolute; inset: 0;
      z-index: -2;
      background:
        linear-gradient(135deg, rgba(20,33,61,.78) 0%, rgba(26,37,84,.62) 55%, rgba(var(--color-primary-rgb),.55) 100%),
        url("../images/hero.jpg") center / cover no-repeat,
        var(--color-primary-900);
    }
    .about-hero::after {
      content: "";
      position: absolute;
      right: -12%; top: -20%;
      width: 60%; height: 120%;
      z-index: -1;
      background: radial-gradient(closest-side, rgba(var(--color-accent-rgb), .55), transparent 70%);
      filter: blur(60px);
      pointer-events: none;
    }
    .about-hero__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-10);
      align-items: end;
    }
    @media (min-width: 900px) {
      .about-hero__grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-12); }
    }
    .about-hero__intro { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
    .about-hero__eyebrow {
      align-self: flex-start;
      display: inline-flex; align-items: center; gap: var(--space-2);
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.25);
      color: #fff;
      font-size: var(--fs-12); font-weight: var(--fw-semibold);
      padding: .375rem .75rem;
      border-radius: var(--radius-pill);
      letter-spacing: .08em; text-transform: uppercase;
      backdrop-filter: blur(8px);
    }
    .about-hero__title {
      color: #fff;
      font-size: var(--fs-40);
      font-weight: var(--fw-bold);
      line-height: var(--lh-tight);
      letter-spacing: -0.02em;
    }
    .about-hero__title em {
      font-style: normal;
      background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-100) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .about-hero__lede {
      color: rgba(255,255,255,.85);
      font-size: var(--fs-18);
      max-width: 56ch;
    }
    @media (min-width: 768px) {
      .about-hero__title { font-size: var(--fs-56); }
    }
    .about-hero__meta {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3);
      padding: var(--space-5);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(8px);
    }
    .about-hero__meta dt {
      font-size: var(--fs-12);
      letter-spacing: .08em; text-transform: uppercase;
      color: rgba(255,255,255,.65);
      font-weight: var(--fw-semibold);
    }
    .about-hero__meta dd {
      margin: 0;
      font-size: var(--fs-18);
      color: #fff;
      font-weight: var(--fw-semibold);
    }
    .about-hero__cell { display: flex; flex-direction: column; gap: var(--space-1); }

    /* ------- Manifiesto — gran cita editorial ------- */
    .about-manifesto {
      padding-block: var(--space-10);
      background: var(--color-bg);
      position: relative;
      overflow: hidden;
    }
    @media (min-width: 768px) {
      .about-manifesto { padding-block: var(--space-16); }
    }
    .about-manifesto__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-6);
      align-items: start;
    }
    @media (min-width: 1024px) {
      .about-manifesto__grid { grid-template-columns: 0.7fr 1.3fr; gap: var(--space-16); }
    }
    .about-manifesto__aside {
      display: flex; flex-direction: column; gap: var(--space-3);
    }
    @media (min-width: 1024px) {
      .about-manifesto__aside { position: sticky; top: 100px; gap: var(--space-4); }
    }
    .about-manifesto__aside .eyebrow { color: var(--color-accent); }
    .about-manifesto__quote-mark {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 5rem; line-height: .8;
      color: var(--color-accent);
      opacity: .85;
    }
    @media (min-width: 1024px) {
      .about-manifesto__quote-mark { font-size: 9rem; }
    }
    .about-manifesto__lede {
      font-size: clamp(1.5rem, 2.4vw, var(--fs-32));
      line-height: 1.3;
      color: var(--color-text);
      font-weight: var(--fw-semibold);
      letter-spacing: -0.01em;
    }
    .about-manifesto__lede mark {
      background: linear-gradient(180deg, transparent 60%, rgba(var(--color-accent-rgb), .35) 60%);
      color: inherit;
      padding: 0 .15em;
    }
    .about-manifesto__body {
      margin-top: var(--space-6);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
      color: var(--color-text-muted);
      font-size: var(--fs-18);
      line-height: var(--lh-loose);
      max-width: 64ch;
    }
    .about-manifesto__body p strong { color: var(--color-text); font-weight: var(--fw-semibold); }
    .about-signature {
      margin-top: var(--space-8);
      display: flex; align-items: center; gap: var(--space-4);
    }
    .about-signature__avatar {
      width: 56px; height: 56px;
      border-radius: 50%;
      background:
        linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-300) 100%);
      display: grid; place-items: center;
      color: #fff; font-weight: var(--fw-bold);
      box-shadow: var(--shadow-md);
    }
    .about-signature__meta { display: flex; flex-direction: column; }
    .about-signature__name { font-weight: var(--fw-semibold); color: var(--color-text); }
    .about-signature__role { font-size: var(--fs-14); color: var(--color-text-soft); }

    /* ------- Cifras — gran «tablero de estado» ------- */
    .about-stats {
      padding-block: var(--space-12);
      background: var(--color-bg-soft);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }
    .about-stats__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-6);
    }
    @media (min-width: 768px) {
      .about-stats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
    }
    .about-stat {
      display: flex; flex-direction: column; gap: var(--space-1);
      padding-left: var(--space-4);
      border-left: 3px solid var(--color-accent);
    }
    .about-stat__value {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: var(--fw-bold);
      color: var(--color-text);
      line-height: 1;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .about-stat__value sup {
      font-size: .55em; color: var(--color-accent); font-weight: var(--fw-semibold);
      vertical-align: super; margin-left: 2px;
    }
    .about-stat__label {
      font-size: var(--fs-14);
      color: var(--color-text-muted);
      max-width: 22ch;
    }
    .about-stat__hint {
      font-size: var(--fs-12);
      color: var(--color-text-soft);
      margin-top: var(--space-1);
    }

    /* ------- Valores — tarjetas ------- */
    .about-values { padding-block: var(--space-16); }
    .about-values__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    @media (min-width: 600px) {
      .about-values__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1024px) {
      .about-values__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
    }
    .about-value {
      position: relative;
      padding: var(--space-6);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg);
      transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
      display: flex; flex-direction: column; gap: var(--space-3);
      overflow: hidden;
    }
    .about-value::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(120% 80% at 0% 0%, rgba(var(--color-accent-rgb),.07), transparent 55%);
      opacity: 0; transition: opacity var(--t-base);
      pointer-events: none;
    }
    .about-value:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(var(--color-accent-rgb), .35);
    }
    .about-value:hover::before { opacity: 1; }
    .about-value__num {
      font-size: var(--fs-12); font-weight: var(--fw-semibold);
      color: var(--color-accent); letter-spacing: .12em;
    }
    .about-value__title {
      font-size: var(--fs-20); font-weight: var(--fw-semibold);
      color: var(--color-text);
    }
    .about-value__text { color: var(--color-text-muted); font-size: var(--fs-16); line-height: var(--lh-normal); }
    .about-value__icon {
      width: 44px; height: 44px;
      display: grid; place-items: center;
      background: var(--color-accent-50);
      color: var(--color-accent-600);
      border-radius: var(--radius-md);
    }

    /* ------- Equipo ------- */
    .about-team {
      padding-block: var(--space-16);
      background: var(--color-bg-soft);
      border-top: 1px solid var(--color-border);
    }
    .about-team__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-5);
    }
    @media (min-width: 768px) {
      .about-team__grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 1024px) {
      .about-team__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
    }
    .team-card {
      display: flex; flex-direction: column; gap: var(--space-3);
    }
    .team-card__photo {
      aspect-ratio: 4 / 5;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, transparent 55%, rgba(20,22,27,.55) 100%),
        var(--ph-img, none) center / cover no-repeat,
        linear-gradient(135deg, var(--ph-from, #C7D2F4), var(--ph-to, #E9D7C5));
      position: relative;
      overflow: hidden;
      isolation: isolate;
      box-shadow: var(--shadow-sm);
      transition: transform var(--t-base), box-shadow var(--t-base);
    }
    .team-card:hover .team-card__photo {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }
    .team-card__photo::after {
      content: "";
      position: absolute; left: 16px; bottom: 16px;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--color-accent);
      box-shadow: 0 0 0 4px rgba(255,255,255,.85);
    }
    .team-card__role {
      font-size: var(--fs-12);
      font-weight: var(--fw-semibold);
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--color-accent-600);
    }
    .team-card__name {
      font-size: var(--fs-18);
      font-weight: var(--fw-semibold);
      color: var(--color-text);
      line-height: var(--lh-snug);
    }
    .team-card__bio {
      font-size: var(--fs-14);
      color: var(--color-text-muted);
      line-height: var(--lh-normal);
    }
    .team-card__langs {
      display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-1);
    }
    .team-card__lang {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: var(--radius-pill);
      background: var(--color-primary-50);
      color: var(--color-primary);
      font-weight: var(--fw-semibold);
      letter-spacing: .04em;
    }

    /* ------- Línea de tiempo ------- */
    .about-timeline { padding-block: var(--space-16); }
    .about-timeline__wrap {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }
    @media (min-width: 768px) {
      .about-timeline__wrap {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
      }
      .about-timeline__wrap::before {
        content: "";
        position: absolute;
        left: 0; right: 0;
        top: 28px;
        height: 2px;
        background:
          repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px);
        z-index: 0;
      }
    }
    .timeline-step {
      position: relative;
      display: flex; flex-direction: column; gap: var(--space-3);
      padding-top: 60px;
      z-index: 1;
    }
    .timeline-step::before {
      content: "";
      position: absolute;
      top: 18px; left: 0;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--color-bg);
      border: 3px solid var(--color-accent);
      box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), .12);
    }
    .timeline-step__year {
      font-size: var(--fs-32);
      font-weight: var(--fw-bold);
      color: var(--color-text);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .timeline-step__title {
      font-size: var(--fs-16);
      font-weight: var(--fw-semibold);
      color: var(--color-text);
    }
    .timeline-step__text {
      font-size: var(--fs-14);
      color: var(--color-text-muted);
      line-height: var(--lh-normal);
    }

    /* ------- Geografía (listas de ciudades) ------- */
    .about-geo {
      padding-block: var(--space-16);
      background: var(--color-bg-soft);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }
    .about-geo__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }
    @media (min-width: 900px) {
      .about-geo__grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-12); align-items: start; }
    }
    .about-geo__map {
      aspect-ratio: 4/3;
      border-radius: var(--radius-lg);
      background:
        radial-gradient(70% 60% at 30% 40%, rgba(var(--color-primary-rgb),.18), transparent 70%),
        radial-gradient(50% 50% at 75% 65%, rgba(var(--color-accent-rgb),.22), transparent 70%),
        linear-gradient(135deg, #EEF2FF 0%, #FFF5EE 100%);
      border: 1px solid var(--color-border);
      position: relative;
      overflow: hidden;
    }
    .about-geo__map::before {
      content: "";
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(20,22,27,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,22,27,.06) 1px, transparent 1px);
      background-size: 24px 24px;
      mask-image: radial-gradient(70% 70% at 50% 50%, #000 60%, transparent 100%);
    }
    .about-geo__map-pin {
      position: absolute;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--color-accent);
      box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb),.25), var(--shadow-md);
    }
    .about-geo__map-pin::after {
      content: attr(data-label);
      position: absolute;
      top: 22px; left: 50%; transform: translateX(-50%);
      font-size: var(--fs-12);
      font-weight: var(--fw-semibold);
      color: var(--color-text);
      background: #fff;
      padding: 3px 8px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border);
      white-space: nowrap;
    }
    .about-geo__lists {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-6);
    }
    @media (min-width: 600px) {
      .about-geo__lists { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
    }
    .about-geo__col h4 {
      font-size: var(--fs-14);
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--color-primary);
      font-weight: var(--fw-semibold);
      margin-bottom: var(--space-3);
    }
    .about-geo__col ul {
      display: flex; flex-direction: column; gap: var(--space-2);
      font-size: var(--fs-14);
      color: var(--color-text-muted);
    }
    .about-geo__col a { color: var(--color-text); border-bottom: 1px dashed transparent; transition: border-color var(--t-fast), color var(--t-fast); }
    .about-geo__col a:hover { color: var(--color-accent-600); border-color: var(--color-accent); }

    /* ------- Licencias y confianza ------- */
    .about-trust { padding-block: var(--space-16); }
    .about-trust__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
    @media (min-width: 768px) {
      .about-trust__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1024px) {
      .about-trust__grid { grid-template-columns: repeat(4, 1fr); }
    }
    .trust-card {
      padding: var(--space-5);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-bg);
      display: flex; flex-direction: column; gap: var(--space-3);
      transition: border-color var(--t-base), box-shadow var(--t-base);
    }
    .trust-card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--color-primary-rgb), .35); }
    .trust-card__icon {
      width: 40px; height: 40px;
      display: grid; place-items: center;
      border-radius: var(--radius-md);
      background: var(--color-primary-50);
      color: var(--color-primary);
    }
    .trust-card__title {
      font-weight: var(--fw-semibold);
      color: var(--color-text);
    }
    .trust-card__text { color: var(--color-text-muted); font-size: var(--fs-14); }

    /* ------- Prensa / reseñas — banner ------- */
    .about-press {
      padding-block: var(--space-12);
      background: var(--color-bg);
      border-top: 1px solid var(--color-border);
    }
    .press-strip {
      display: flex;
      gap: var(--space-10);
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      color: var(--color-text-soft);
    }
    .press-strip__item {
      font-family: Georgia, "Times New Roman", serif;
      font-style: italic;
      font-weight: 600;
      letter-spacing: .04em;
      font-size: var(--fs-20);
      opacity: .65;
      transition: opacity var(--t-fast), color var(--t-fast);
    }
    .press-strip__item:hover { opacity: 1; color: var(--color-text); }

    /* ------- CTA — sección oscura ------- */
    .about-cta {
      background: var(--color-bg-dark);
      color: #fff;
      padding-block: var(--space-16);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .about-cta::before {
      content: "";
      position: absolute; inset: -10%;
      z-index: -1;
      background:
        radial-gradient(40% 50% at 80% 0%, rgba(var(--color-accent-rgb),.4), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, rgba(var(--color-primary-rgb),.55), transparent 70%);
      filter: blur(40px);
    }
    .about-cta__inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-8);
      align-items: center;
    }
    @media (min-width: 900px) {
      .about-cta__inner { grid-template-columns: 1.3fr 1fr; gap: var(--space-12); }
    }
    .about-cta__title {
      font-size: clamp(1.75rem, 3.4vw, 2.75rem);
      font-weight: var(--fw-bold);
      letter-spacing: -.02em;
      line-height: var(--lh-tight);
      color: #fff;
    }
    .about-cta__title em {
      font-style: normal;
      background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-100) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .about-cta__lede { color: rgba(255,255,255,.78); margin-top: var(--space-4); max-width: 56ch; }
    .about-cta__actions {
      display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6);
    }
    .about-cta__panel {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      backdrop-filter: blur(8px);
      display: grid; gap: var(--space-4);
    }
    .about-cta__panel h3 {
      font-size: var(--fs-18);
      color: #fff;
      font-weight: var(--fw-semibold);
    }
    .about-cta__list {
      display: flex; flex-direction: column;
      gap: var(--space-3);
      font-size: var(--fs-14);
      color: rgba(255,255,255,.78);
    }
    .about-cta__list li {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: var(--space-3);
      align-items: start;
    }
    .about-cta__list svg { color: var(--color-accent); margin-top: 2px; }
    .about-cta__list strong { color: #fff; display: block; }