/**
 * /sobre/ · Sobre mí — Jefferson Maldonado
 *
 * Tokens DS UXDivi + estilos scoped a `body.uxdivi-frontend--sobre .ux-sobre`
 * Fuente de verdad: rediseno/Sobre Mi - Jefferson Maldonado.html
 * Generado por tools/regen-sobre.py
 */

  /* ========= Sobre mí — variables locales ========= */
  :root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 88px;
    --fs-h1: clamp(44px, 6vw, 76px);
    --fs-h2: clamp(32px, 4vw, 52px);
    --fs-eyebrow: 11px;
    --radius-pill: 999px;
    --max-w-tablet: 768px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 250ms;
    --dur-slow: 450ms;
  }

  /* ========= Layout helpers ========= */
  /* Container principal del rediseño 2026 · regla dura del sitio (1280px).
     Sin padding lateral · llega hasta los bordes del grid. Ver memoria
     feedback-container-1280px.md para contexto. */
  .wrap { max-width: 1280px; margin: 0 auto; }
  .wrap--narrow { max-width: var(--max-w-tablet); margin: 0 auto; padding: 0 var(--space-5); }
  /* Anti scroll-horizontal · los .glow-brand del hero usan left/right
     negativos para sangrar el halo. body{overflow-x:hidden} contiene
     ese desbordamiento sin romper el efecto visual. */
  html, body { overflow-x: hidden; }
  /* Tablet + móvil · padding lateral 4vw = contenido al 92% del viewport
     (regla global de Jefferson para contenedores en pantallas pequeñas).
     Aplica al .wrap (NO al .ux-sobre ni al .sec) para que las secciones
     conserven sus atmósferas/degradados full-bleed hasta los bordes del
     viewport, y solo el contenido interior se constriña al 92%. */
  @media (max-width: 980px) {
    .wrap { padding-left: 4vw; padding-right: 4vw; }
  }

  /* ========= Eyebrow con guión ========= */
  .eyebrow-rule {
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cyan);
  }
  .eyebrow-rule::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--cyan);
  }

  /* ========= Editorial type scales ========= */
  .display-xl {
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.025em;
    color: var(--ink); margin: 0; text-wrap: balance;
  }
  .display-lg {
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em;
    color: var(--ink); margin: 0; text-wrap: balance;
  }
  .display-md {
    font-family: var(--display); font-weight: 700;
    font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em;
    color: var(--ink); margin: 0;
  }
  .bignum {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(96px, 16vw, 220px);
    line-height: 0.95; letter-spacing: -0.04em;
    color: var(--ink); margin: 0; display: block;
  }
  .text-glow {
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .prose { font-family: var(--body); font-size: 16px; line-height: 1.65; color: var(--ink-2); }
  .prose p + p { margin-top: 1.1em; }
  .lede { font-family: var(--body); font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--ink-2); }

  /* ========= Sections ========= */
  .sec { position: relative; padding: var(--space-9) 0; overflow: hidden; }
  /* .sec--alt neutralizado — el fondo es uniforme heredado del body para evitar bandas/cortes */
  .sec--alt { background: transparent; }

  /* ═══════════════════════════════════════════════════════════
     FX — Sistema de atmósferas reutilizables (mismo que Planes)
     · fx-grid:       grid pattern cyan con mask radial
     · fx-blur-shape: shape circular blur con mix-blend-mode: screen
     · glow-orb-center: halo central radial brand
     · @keyframes uxdivi-float: animación suave 30px scale 1.1
     ═══════════════════════════════════════════════════════════ */
  .fx-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(98,229,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(98,229,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
    z-index: 0;
  }
  .fx-blur-shape {
    position: absolute; pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
    mix-blend-mode: screen;
    z-index: 0;
    animation: uxdivi-float 12s ease-in-out infinite;
  }
  .fx-blur-shape--brand {
    top: 10%; left: 5%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--brand, #014DFD) 0%, transparent 70%);
    opacity: 0.6;
  }
  .fx-blur-shape--cyan {
    bottom: 10%; right: 5%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--cyan, #62E5FF) 0%, transparent 70%);
    opacity: 0.35;
    animation: uxdivi-float 14s ease-in-out infinite reverse;
  }
  @keyframes uxdivi-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, -30px) scale(1.1); }
  }
  /* Variantes sutiles para secciones medianas */
  .fx-blur-shape--sm { filter: blur(80px); }
  .fx-blur-shape--sm.fx-blur-shape--brand {
    top: 22%; left: 5%; bottom: auto; right: auto;
    width: 380px; height: 380px;
    opacity: 0.32;
  }
  .fx-blur-shape--sm.fx-blur-shape--cyan {
    top: auto; left: auto; bottom: 22%; right: 5%;
    width: 420px; height: 420px;
    opacity: 0.20;
  }
  .fx-blur-shape--alt.fx-blur-shape--brand { left: auto; right: 5%; }
  .fx-blur-shape--alt.fx-blur-shape--cyan  { right: auto; left: 5%; }
  /* Glow central reutilizable */
  .glow-orb-center {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 600px; height: 380px;
    background: radial-gradient(ellipse, rgba(1,77,253,0.4), rgba(98,229,255,0.12) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
  }
  .glow-orb-center--sm {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 520px; height: 360px;
    background: radial-gradient(ellipse, rgba(1,77,253,0.22), rgba(98,229,255,0.08) 50%, transparent 75%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
  }
  /* No-cuts: clip-path para que las atmósferas sangren ±140px vertical
     entre secciones y se fundan sin línea de corte. */
  .sec, .closing-sec {
    overflow: visible !important;
    clip-path: inset(-140px 0 -140px 0);
  }
  .sec > .wrap, .closing-sec > .wrap { position: relative; z-index: 1; }
  @media (prefers-reduced-motion: reduce) {
    .fx-blur-shape { animation: none; }
  }

  /* ═══ CTA FINAL — Fondo oscuro con atmósfera muy sutil ═══
     Base oscura sólida + halo brand suave central + grid pattern apenas perceptible
     + un soplo de movimiento muy lento (35s, opacidad baja) para que tenga vida
     sin distraer del cierre del relato. */
  .cta-sec {
    isolation: isolate;
    background: linear-gradient(180deg, rgba(8,12,28,0.95), rgba(4,8,20,0.98));
    border-radius: var(--radius-xl, 28px);
  }
  .cta-sec::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(circle at 50% 30%, rgba(1,77,253,0.22) 0%, transparent 50%),
      radial-gradient(circle at 30% 80%, rgba(98,229,255,0.10) 0%, transparent 55%),
      radial-gradient(circle at 75% 70%, rgba(74,126,255,0.12) 0%, transparent 50%);
    filter: blur(70px);
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
    animation: uxdivi-cta-drift-subtle 35s ease-in-out infinite;
  }
  @keyframes uxdivi-cta-drift-subtle {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(2%, -2%, 0) scale(1.06); }
  }
  .cta-sec::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(98,229,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(98,229,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
    z-index: -1;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .cta-sec::before { animation: none; }
  }

  /* ========= Editorial image ========= */
  .ed-img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: var(--radius);
    border: 0;
    background: var(--surface);
    display: block;
  }
  .ed-img-meta {
    display: flex; justify-content: space-between;
    margin-top: var(--space-3);
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.14em;
  }
  .ed-img-meta .a { color: var(--ink-3); }
  .ed-img-meta .b { color: var(--ink-4); }

  /* ========= Callout list ========= */
  .callout-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink-3);
  }
  .callout-list li {
    padding-left: 22px; position: relative; line-height: 1.5;
  }
  .callout-list li::before {
    content: ""; position: absolute;
    left: 0; top: 8px;
    width: 12px; height: 1px; background: var(--cyan);
  }

  /* ========= Eco cards (ecosistema) ========= */
  .eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-9); }
  .eco-card {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  .eco-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 24px 60px -25px rgba(1,77,253,0.4); }
  .eco-card:focus-visible {
    outline: 0;
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(98,229,255,0.15);
  }
  .eco-card--feat {
    background: linear-gradient(180deg, rgba(1,77,253,0.18), var(--surface) 60%);
    border-color: var(--line-strong);
    box-shadow: 0 24px 60px -22px rgba(1,77,253,0.6);
  }
  .eco-pill {
    font-family: var(--mono); font-size: 10px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.14em;
    padding: 6px 12px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.04);
    color: var(--ink-3);
    border: 1px solid var(--line-2);
  }
  .eco-pill--cyan {
    background: rgba(98,229,255,0.1);
    color: var(--cyan);
    border-color: var(--line-strong);
  }
  .eco-brand {
    margin-top: var(--space-6);
    height: 56px;
    display: flex; align-items: center; gap: 10px;
  }
  .eco-brand-text {
    font-family: var(--display); font-weight: 700;
    font-size: 36px; letter-spacing: -0.04em; color: var(--ink);
  }
  .eco-brand-text .accent { color: var(--cyan); }
  .eco-brand-stack {
    font-family: var(--display); font-weight: 600;
    font-size: 16px; letter-spacing: -0.02em;
    color: var(--ink); line-height: 1.1;
  }
  .eco-brand-stack .light { font-weight: 400; color: var(--ink-3); }
  .eco-title {
    font-family: var(--display); font-weight: 600;
    font-size: 26px; letter-spacing: -0.02em;
    color: var(--ink); margin-top: var(--space-5); line-height: 1.15;
  }
  .eco-desc {
    margin-top: var(--space-5);
    font-size: 14px; line-height: 1.6; color: var(--ink-2);
  }
  .eco-link {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: var(--space-6);
    font-size: 14px; font-weight: 600; color: var(--cyan);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
  }
  .eco-link:hover { color: var(--cyan-2); }
  .eco-link .arr { font-family: var(--mono); }

  /* ========= Reveal ========= */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.is-in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ========= Pillars (sec 7) ========= */
  .sm-pillars { margin-top: var(--space-9); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .sm-pillar {
    padding: var(--space-6) var(--space-5) var(--space-5);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(98,229,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--line-2);
    position: relative;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .sm-pillar:hover { transform: translateY(-3px); border-color: var(--line-strong); }
  .sm-pillar__num {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(56px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    margin-bottom: var(--space-5);
    display: block;
  }
  .sm-pillar__txt {
    font-family: var(--display); font-size: 17px; line-height: 1.4;
    letter-spacing: -0.01em; color: var(--ink); font-weight: 500; margin: 0;
  }

  /* ========= Stats grid (sec 8) ========= */
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-6); }
  .stat { border-top: 1px solid var(--line-2); padding-top: var(--space-5); }
  .stat__num {
    font-family: var(--display); font-weight: 500;
    font-size: clamp(64px, 9vw, 132px);
    line-height: 0.95; letter-spacing: -0.03em; color: var(--ink);
  }
  .stat__label {
    font-family: var(--mono); font-size: var(--fs-eyebrow);
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink-3); margin-top: var(--space-3);
  }

  /* ========= Principles (sec 9) — head a la izquierda, 4 cards 2x2 ========= */
  .philo-head { margin-bottom: var(--space-8); max-width: 680px; }
  .principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
  .principle {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid var(--line-2);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
    position: relative;
  }
  .principle:hover { transform: translateY(-3px); border-color: var(--line-strong); }
  .principle__num {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(40px, 4.2vw, 56px);
    line-height: 0.95; letter-spacing: -0.03em;
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    margin-bottom: var(--space-4); display: block;
  }
  .principle__title {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: -0.02em; line-height: 1.15;
    color: var(--ink); margin: 0;
  }
  .principle__body {
    font-family: var(--body); font-size: 15px; line-height: 1.6;
    color: var(--ink-2); margin: var(--space-4) 0 0;
  }

  /* ========= Chapter grid (caps I–III) ========= */
  .chapter-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-9); align-items: start; }
  .chapter-grid--reverse { grid-template-columns: 1fr 1.1fr; }

  /* ========= Hero specific ========= */
  .hero-sec { padding: 80px 0 var(--space-9); }
  .hero-grid { display: grid; grid-template-columns: 45fr 55fr; gap: var(--space-8); align-items: center; }
  .hero-meta { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-6); }
  .hero-meta__label {
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink-3); margin-bottom: var(--space-2);
  }
  .hero-meta__val {
    font-family: var(--display); font-size: 15px; font-weight: 500;
    color: var(--ink); line-height: 1.55;
  }
  .hero-ctas { margin-top: var(--space-7); display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-start; align-items: center; }

  /* ========= En números head ========= */
  .num-head {
    display: flex; justify-content: space-between;
    align-items: flex-end; flex-wrap: wrap;
    gap: var(--space-5); margin-bottom: var(--space-8);
  }
  .num-head__note {
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink-3); max-width: 260px; text-align: right; line-height: 1.6;
  }

  /* ========= Timeline strip ========= */
  .tl-strip { position: relative; margin-top: var(--space-9); }
  .tl-strip__line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
    position: absolute; top: 8px; left: 0; right: 0;
  }
  .tl-strip__row { display: flex; justify-content: space-between; position: relative; }
  .tl-strip__dot {
    width: 16px; height: 16px; border-radius: 50%;
    border: 4px solid var(--bg);
    margin-bottom: var(--space-3);
  }
  .tl-strip__label {
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.14em;
  }
  .tl-strip__col--start .tl-strip__dot { background: var(--ink-3); }
  .tl-strip__col--start { text-align: left; }
  .tl-strip__col--mid   { text-align: center; }
  .tl-strip__col--mid   .tl-strip__dot { background: var(--brand); margin: 0 auto var(--space-3); }
  .tl-strip__col--end   { text-align: right; }
  .tl-strip__col--end   .tl-strip__dot { background: var(--cyan); margin-left: auto; box-shadow: var(--glow-cyan); }
  .tl-strip__col--start .tl-strip__label { color: var(--ink-3); }
  .tl-strip__col--mid   .tl-strip__label { color: var(--ink-2); }
  .tl-strip__col--end   .tl-strip__label { color: var(--cyan); }

  /* ========= Frase resumen ecosistema ========= */
  .eco-summary {
    margin: var(--space-9) auto 0;
    max-width: 720px; text-align: center;
    font-family: var(--display); font-size: 22px; line-height: 1.45;
    color: var(--ink); letter-spacing: -0.015em;
  }
  .eco-summary .muted { color: var(--ink-3); }
  .eco-summary__sub {
    display: block; margin-top: var(--space-4);
    font-size: 16px; color: var(--ink-2);
    font-family: var(--body); font-weight: 400; line-height: 1.65;
  }

  /* ========= Sub bloque (cap III sub-secciones) ========= */
  .sub-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; }
  .sub-block + .sub-block { margin-top: var(--space-9); }
  .sub-block__divider { height: 1px; background: var(--line-2); margin: var(--space-9) auto; }
  .sub-block__pad { padding-bottom: var(--space-5); }
  .sub-block__h {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; margin: 0;
  }
  .sub-block__body { margin-top: var(--space-5); font-size: 16px; max-width: 520px; }
  .sub-block__body p.kicker {
    color: var(--ink); font-family: var(--display);
    font-size: 18px; font-weight: 500;
  }

  /* ========= Cierre cita (sec 10) — fondo con degradados, sin foto ========= */
  .closing-sec {
    padding: 0; min-height: 72vh;
    display: flex; align-items: center;
    position: relative; overflow: hidden;
    background:
      radial-gradient(900px 600px at 50% 0%, rgba(1,77,253,0.32), transparent 60%),
      radial-gradient(700px 500px at 50% 100%, rgba(98,229,255,0.14), transparent 60%),
      var(--bg-2);
  }
  .closing-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      repeating-linear-gradient(0deg,  rgba(98,229,255,0.05) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(90deg, rgba(98,229,255,0.05) 0 1px, transparent 1px 64px);
    mask-image: radial-gradient(80% 60% at 50% 50%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(80% 60% at 50% 50%, #000 30%, transparent 100%);
  }
  .closing-content {
    position: relative; text-align: center;
    padding-top: var(--space-9); padding-bottom: var(--space-9);
  }
  .closing-quote-mark {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(72px, 12vw, 180px);
    color: var(--cyan); opacity: 0.35;
    line-height: 0.5; height: 60px;
  }
  .closing-blockquote {
    font-family: var(--display); font-weight: 500;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: 1.2; letter-spacing: -0.03em;
    color: var(--ink); margin: 0; text-wrap: balance;
  }
  .closing-sign {
    margin-top: var(--space-8);
    display: flex; justify-content: center; align-items: center; gap: var(--space-4);
  }
  .closing-sign__rule { width: 32px; height: 1px; background: var(--cyan); opacity: 0.5; }
  .closing-sign__name {
    font-family: var(--display); font-weight: 600;
    font-size: 18px; color: var(--ink); letter-spacing: -0.01em;
  }
  .closing-sign__sub {
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink-3); margin-top: 6px;
  }

  /* ========= CTA final ========= */
  .cta-sec { position: relative; }
  .cta-soc {
    margin-top: var(--space-9);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-2);
  }
  .cta-soc__lead {
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink-3); margin-bottom: var(--space-4);
  }
  .cta-soc__links {
    display: flex; gap: var(--space-5); justify-content: center; flex-wrap: wrap;
    font-family: var(--display); font-size: 15px; font-weight: 500;
  }
  .cta-soc__links a { color: var(--ink); text-decoration: none; transition: color var(--dur) var(--ease); }
  .cta-soc__links a:hover { color: var(--cyan); }
  .cta-soc__links .arr { font-family: var(--mono); color: var(--cyan); }

  /* ========= Particle field ========= */
  .particle-field { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; }
  .particle {
    position: absolute;
    border-radius: 50%;
  }
  @keyframes particle-drift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-12px, 16px); }
  }

  /* ========= Responsive ========= */
  @media (max-width: 900px) {
    .hero-grid, .chapter-grid {
      grid-template-columns: 1fr !important; gap: var(--space-7) !important;
    }
    .chapter-grid > div[data-sticky] { position: static !important; }
    .sub-block { grid-template-columns: 1fr !important; gap: var(--space-5) !important; }
    .sub-block--reverse > div[data-order="1"] { order: 0; }
    .sub-block--reverse > div[data-order="2"] { order: 1; text-align: left !important; }
    .eco-grid, .sm-pillars, .principles { grid-template-columns: 1fr !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-6) var(--space-5) !important; }
    .num-head__note { text-align: left; }
  }
  @media (max-width: 540px) {
    /* Stats en móvil · 2 por fila pegadas a los bordes extremos del wrap
       (regla Jefferson 2026-05-15 · "space-between"). gap horizontal 0
       para que cada par toque los bordes del 92% viewport. */
    .stats-grid {
      grid-template-columns: 1fr 1fr !important;
      column-gap: 0 !important;
      row-gap: var(--space-6) !important;
    }
    .stats-grid .stat:nth-child(even) { text-align: right; }
    .closing-blockquote { font-size: 30px; }
    .display-xl { font-size: 42px; }
  }