/* ===========================================
       RIZOMA - LANDING PAGE
       Tokens, Base, Components, Utilities
       =========================================== */

    /* ---- Layers ---- */
    @layer tokens, reset, base, components, utilities;

    /* ---- TOKENS ---- */
    @layer tokens {
      :root {
        /* Verde Bosque */
        --color-forest-50:  oklch(95% 0.012 160);
        --color-forest-100: oklch(90% 0.024 160);
        --color-forest-200: oklch(78% 0.048 158);
        --color-forest-300: oklch(65% 0.072 156);
        --color-forest-400: oklch(52% 0.088 154);
        --color-forest-500: oklch(40% 0.092 152);
        --color-forest-600: oklch(32% 0.088 150);
        --color-forest-700: oklch(25% 0.080 148);
        --color-forest-800: oklch(18% 0.065 146);
        --color-forest-900: oklch(12% 0.045 144);

        /* Tierra / Arcilla */
        --color-earth-50:  oklch(95% 0.008 75);
        --color-earth-100: oklch(90% 0.014 70);
        --color-earth-200: oklch(80% 0.024 68);
        --color-earth-300: oklch(68% 0.038 66);
        --color-earth-400: oklch(55% 0.050 64);
        --color-earth-500: oklch(44% 0.058 62);
        --color-earth-600: oklch(36% 0.056 60);
        --color-earth-700: oklch(28% 0.050 58);
        --color-earth-800: oklch(20% 0.040 56);
        --color-earth-900: oklch(12% 0.028 55);

        /* Oro / Amarillo Sol */
        --color-sun-50:  oklch(97% 0.020 95);
        --color-sun-100: oklch(93% 0.035 95);
        --color-sun-200: oklch(86% 0.060 92);
        --color-sun-300: oklch(78% 0.082 90);
        --color-sun-400: oklch(70% 0.090 88);
        --color-sun-500: oklch(60% 0.092 86);
        --color-sun-600: oklch(50% 0.088 84);
        --color-sun-700: oklch(38% 0.080 82);
        --color-sun-800: oklch(26% 0.065 80);
        --color-sun-900: oklch(15% 0.042 78);

        /* Neutros Tintados */
        --color-neutral-50:  oklch(98% 0.004 85);
        --color-neutral-100: oklch(95% 0.005 85);
        --color-neutral-200: oklch(88% 0.006 85);
        --color-neutral-300: oklch(78% 0.007 84);
        --color-neutral-400: oklch(65% 0.008 83);
        --color-neutral-500: oklch(52% 0.009 82);
        --color-neutral-600: oklch(40% 0.010 81);
        --color-neutral-700: oklch(30% 0.011 80);
        --color-neutral-800: oklch(20% 0.012 78);
        --color-neutral-900: oklch(12% 0.010 75);

        /* Alias semánticos */
        --color-bg:           var(--color-neutral-50);
        --color-bg-alt:       var(--color-forest-50);
        --color-bg-card:      var(--color-neutral-50);
        --color-bg-dark:      var(--color-forest-800);
        --color-text:         var(--color-neutral-900);
        --color-text-inverse: var(--color-neutral-50);
        --color-text-muted:   var(--color-neutral-600);
        --color-border:       var(--color-neutral-200);
        --color-accent:       var(--color-forest-500);
        --color-accent-hover: var(--color-forest-600);

        /* Tipografía */
        --font-serif: "Lora", "Literata", Georgia, "Times New Roman", serif;
        --font-sans:  "Raleway", "Source Sans 3", "Open Sans", sans-serif;

        --font-display-xl:  clamp(2.441rem, 4vw, 3.815rem);
        --font-display-lg:  clamp(2.052rem, 3.5vw, 3.052rem);
        --font-display:     clamp(1.641rem, 3vw, 2.441rem);
        --font-h1:          clamp(1.312rem, 2.5vw, 2.052rem);
        --font-h2:          clamp(1.125rem, 2vw, 1.641rem);
        --font-h3:          clamp(1rem, 1.5vw, 1.312rem);
        --font-h4:          clamp(0.9375rem, 1.25vw, 1.125rem);
        --font-body-lg:     clamp(1rem, 1.25vw, 1.125rem);
        --font-body:        1rem;
        --font-body-sm:     0.875rem;
        --font-label:       0.8125rem;
        --font-button:      0.9375rem;

        --leading-display:  1.10;
        --leading-tight:    1.25;
        --leading-normal:   1.60;
        --leading-relaxed:  1.70;

        /* Espacio 4pt */
        --space-1:   0.0625rem;
        --space-2:   0.125rem;
        --space-4:   0.25rem;
        --space-8:   0.5rem;
        --space-12:  0.75rem;
        --space-16:  1rem;
        --space-20:  1.25rem;
        --space-24:  1.5rem;
        --space-28:  1.75rem;
        --space-32:  2rem;
        --space-40:  2.5rem;
        --space-48:  3rem;
        --space-56:  3.5rem;
        --space-64:  4rem;
        --space-72:  4.5rem;
        --space-80:  5rem;
        --space-96:  6rem;
        --space-128: 8rem;

        /* Radios */
        --radius-sm:    2px;
        --radius-md:    4px;
        --radius-lg:    8px;
        --radius-xl:    12px;

        /* Sombras */
        --shadow-sm:   0 1px 2px oklch(0% 0 0 / 0.06);
        --shadow-md:   0 2px 8px oklch(0% 0 0 / 0.08);
        --shadow-lg:   0 4px 16px oklch(0% 0 0 / 0.10);

        /* Transiciones */
        --duration-fast:   150ms;
        --duration-normal: 250ms;
        --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
        --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
        --transition-fast: var(--duration-fast) var(--ease-out);
        --transition:      var(--duration-normal) var(--ease-out);

        /* Containers */
        --container-sm: min(100% - var(--space-32), 640px);
        --container-md: min(100% - var(--space-40), 900px);
        --container-lg: min(100% - var(--space-48), 1200px);
        --container-xl: min(100% - var(--space-48), 1400px);

        /* Z-index */
        --z-sticky:   200;
        --z-overlay:  300;
      }
    }

    /* ---- RESET ---- */
    @layer reset {
      *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      }
      body {
        min-height: 100vh;
        background-color: var(--color-bg);
      }
      img, svg {
        display: block;
        max-width: 100%;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      ul {
        list-style: none;
      }
      button {
        font: inherit;
        cursor: pointer;
        border: none;
        background: none;
      }
    }

    /* ---- BASE ---- */
    @layer base {
      body {
        font-family: var(--font-sans);
        font-size: var(--font-body);
        line-height: var(--leading-normal);
        color: var(--color-text);
        background-color: var(--color-bg);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-serif);
        font-weight: 400;
        line-height: var(--leading-tight);
        color: var(--color-text);
      }

      ::selection {
        background-color: var(--color-forest-200);
        color: var(--color-forest-900);
      }

      .text-display-xl {
        font-family: var(--font-serif);
        font-size: var(--font-display-xl);
        line-height: var(--leading-display);
        font-weight: 400;
        letter-spacing: -0.01em;
      }

      .text-display-lg {
        font-family: var(--font-serif);
        font-size: var(--font-display-lg);
        line-height: 1.12;
        font-weight: 400;
        letter-spacing: -0.005em;
      }

      .text-display {
        font-family: var(--font-serif);
        font-size: var(--font-display);
        line-height: var(--leading-tight);
        font-weight: 400;
      }

      .text-h2 {
        font-family: var(--font-serif);
        font-size: var(--font-h2);
        line-height: var(--leading-tight);
        font-weight: 400;
      }

      .text-body-lg {
        font-family: var(--font-sans);
        font-size: var(--font-body-lg);
        line-height: var(--leading-normal);
      }

      .text-label {
        font-family: var(--font-sans);
        font-size: var(--font-label);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        html {
          scroll-behavior: auto;
        }
      }
    }

    /* ---- COMPONENTS ---- */
    @layer components {
      /* --- Navigation --- */
      .nav {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        background-color: oklch(from var(--color-neutral-50) l c h / 0.92);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--color-border);
      }

      .nav__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        max-width: var(--container-xl);
        margin-inline: auto;
        padding-inline: var(--space-16);
      }

      .nav__logo {
        display: flex;
        align-items: center;
        gap: var(--space-8);
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--color-forest-500);
        text-decoration: none;
        flex-shrink: 0;
      }

      .nav__logo-icon {
        width: 28px;
        height: 28px;
        color: var(--color-forest-400);
      }

      .nav__links {
        display: none;
        align-items: center;
        gap: var(--space-4);
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .nav__link {
        display: inline-block;
        padding: var(--space-8) var(--space-12);
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        font-weight: 500;
        color: var(--color-text-muted);
        text-decoration: none;
        border-radius: var(--radius-md);
        transition: color var(--transition-fast), background-color var(--transition-fast);
      }

      .nav__link:hover {
        color: var(--color-forest-500);
        background-color: var(--color-forest-50);
      }

      .nav__link:focus-visible {
        outline: 2px solid var(--color-sun-300);
        outline-offset: 2px;
      }

      .nav__cta {
        flex-shrink: 0;
      }

      .nav__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: var(--space-8);
        cursor: pointer;
        color: var(--color-text);
        border-radius: var(--radius-md);
      }

      .nav__toggle:hover {
        background-color: var(--color-forest-50);
      }

      .nav__toggle svg {
        width: 24px;
        height: 24px;
      }

      /* --- Mobile nav overlay --- */
      .nav__overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        background-color: var(--color-bg);
        padding: var(--space-24);
      }

      .nav__overlay.open {
        display: flex;
        flex-direction: column;
      }

      .nav__overlay-header {
        display: flex;
        justify-content: flex-end;
        margin-bottom: var(--space-48);
      }

      .nav__overlay-close {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-8);
        cursor: pointer;
        color: var(--color-text);
        border-radius: var(--radius-md);
      }

      .nav__overlay-close svg {
        width: 24px;
        height: 24px;
      }

      .nav__overlay-links {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
      }

      .nav__overlay-link {
        display: block;
        padding: var(--space-16) var(--space-8);
        font-family: var(--font-serif);
        font-size: var(--font-h3);
        color: var(--color-text);
        text-decoration: none;
        border-bottom: 1px solid var(--color-border);
        transition: color var(--transition-fast);
      }

      .nav__overlay-link:hover {
        color: var(--color-forest-500);
      }

      .nav__overlay-cta {
        margin-top: var(--space-32);
      }

      /* --- Buttons --- */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-8);
        padding: var(--space-12) var(--space-24);
        font-family: var(--font-sans);
        font-size: var(--font-button);
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.02em;
        border-radius: var(--radius-lg);
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color var(--transition-fast),
                    border-color var(--transition-fast),
                    color var(--transition-fast),
                    box-shadow var(--transition-fast);
        border: 2px solid transparent;
      }

      .btn:focus-visible {
        outline: 2px solid var(--color-sun-300);
        outline-offset: 2px;
      }

      .btn:active {
        transform: scale(0.98);
      }

      .btn--primary {
        color: var(--color-neutral-50);
        background-color: var(--color-forest-500);
        border-color: var(--color-forest-500);
      }

      .btn--primary:hover {
        background-color: var(--color-forest-600);
        border-color: var(--color-forest-600);
      }

      .btn--secondary {
        color: var(--color-forest-500);
        background-color: transparent;
        border-color: var(--color-forest-200);
      }

      .btn--secondary:hover {
        background-color: var(--color-forest-100);
        border-color: var(--color-forest-400);
        color: var(--color-forest-600);
      }

      .btn--ghost {
        color: var(--color-forest-500);
        background-color: transparent;
        border-color: transparent;
        padding: var(--space-8) var(--space-16);
      }

      .btn--ghost:hover {
        background-color: var(--color-forest-50);
        color: var(--color-forest-600);
      }

      .btn--light {
        color: var(--color-forest-800);
        background-color: var(--color-neutral-50);
        border-color: var(--color-neutral-50);
      }

      .btn--light:hover {
        background-color: var(--color-neutral-100);
        border-color: var(--color-neutral-100);
      }

      .btn--outline-light {
        color: var(--color-neutral-50);
        background-color: transparent;
        border-color: var(--color-neutral-300);
      }

      .btn--outline-light:hover {
        background-color: oklch(from var(--color-neutral-50) l c h / 0.1);
        border-color: var(--color-neutral-50);
      }

      /* --- Hero --- */
      .hero {
        position: relative;
        min-height: clamp(60vh, 80vh, 100vh);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-48) var(--space-16);
        overflow: hidden;
        background: linear-gradient(
          160deg,
          var(--color-forest-800) 0%,
          var(--color-forest-700) 40%,
          var(--color-earth-700) 100%
        );
      }

      .hero__rizoma-bg {
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0.15;
        pointer-events: none;
      }

      .hero__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
          to bottom,
          oklch(from var(--color-forest-900) l c h / 0.4) 0%,
          oklch(from var(--color-forest-800) l c h / 0.5) 50%,
          oklch(from var(--color-forest-800) l c h / 0.7) 100%
        );
      }

      .hero__content {
        position: relative;
        z-index: 2;
        max-width: var(--container-md);
        text-align: center;
        color: var(--color-forest-50);
      }

      .hero__tagline {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: var(--font-label);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-sun-200);
        margin-bottom: var(--space-16);
        padding: var(--space-4) var(--space-12);
        border: 1px solid oklch(from var(--color-sun-200) l c h / 0.3);
        border-radius: var(--radius-xl);
      }

      .hero__title {
        font-family: var(--font-serif);
        font-size: var(--font-display-xl);
        line-height: var(--leading-display);
        font-weight: 400;
        letter-spacing: -0.01em;
        margin-bottom: var(--space-16);
        max-width: 14ch;
        margin-inline: auto;
        color: var(--color-forest-50);
      }

      .hero__title em {
        font-style: italic;
        color: var(--color-sun-200);
      }

      .hero__subtitle {
        font-family: var(--font-sans);
        font-size: var(--font-body-lg);
        line-height: var(--leading-relaxed);
        color: var(--color-forest-100);
        margin-bottom: var(--space-32);
        max-width: 60ch;
        margin-inline: auto;
      }

      .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-16);
        justify-content: center;
      }

      .hero__lead {
        font-family: var(--font-sans);
        font-size: var(--font-body);
        line-height: var(--leading-normal);
        color: var(--color-forest-100);
        max-width: 65ch;
        margin-inline: auto;
        margin-bottom: var(--space-8);
      }

      /* --- Section --- */
      .section {
        padding-block: var(--space-48);
        padding-inline: var(--space-16);
        background-color: var(--color-bg);
      }

      .section--alt {
        background-color: var(--color-bg-alt);
      }

      .section--dark {
        background-color: var(--color-bg-dark);
        color: var(--color-text-inverse);
      }

      .section--earth {
        background-color: oklch(94% 0.006 75);
      }

      .section__inner {
        max-width: var(--container-lg);
        margin-inline: auto;
      }

      .section__header {
        text-align: center;
        margin-bottom: var(--space-48);
        max-width: var(--container-sm);
        margin-inline: auto;
      }

      .section__label {
        font-family: var(--font-sans);
        font-size: var(--font-label);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-forest-500);
        margin-bottom: var(--space-12);
      }

      .section--dark .section__label {
        color: var(--color-sun-200);
      }

      .section__title {
        font-family: var(--font-serif);
        font-size: var(--font-display);
        line-height: var(--leading-tight);
        color: var(--color-text);
        margin-bottom: var(--space-16);
      }

      .section--dark .section__title {
        color: var(--color-text-inverse);
      }

      .section__description {
        font-family: var(--font-sans);
        font-size: var(--font-body-lg);
        line-height: var(--leading-normal);
        color: var(--color-text-muted);
      }

      .section--dark .section__description {
        color: var(--color-neutral-300);
      }

      /* --- Manifiesto two-column --- */
      .manifiesto__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-32);
        align-items: start;
      }

      .manifiesto__text p {
        margin-bottom: var(--space-16);
        font-family: var(--font-sans);
        font-size: var(--font-body);
        line-height: var(--leading-relaxed);
        color: var(--color-text-muted);
      }

      .manifiesto__text p:last-child {
        margin-bottom: 0;
      }

      .manifiesto__principles {
        display: flex;
        flex-direction: column;
        gap: var(--space-16);
      }

      .principle-card {
        display: flex;
        gap: var(--space-16);
        align-items: flex-start;
        padding: var(--space-20);
        background-color: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        transition: box-shadow var(--transition), transform var(--transition);
      }

      .principle-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }

      .principle-card__icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        color: var(--color-forest-400);
      }

      .principle-card__title {
        font-family: var(--font-serif);
        font-size: var(--font-h4);
        font-weight: 500;
        color: var(--color-text);
        margin-bottom: var(--space-4);
      }

      .principle-card__desc {
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        line-height: var(--leading-normal);
        color: var(--color-text-muted);
      }

      /* --- Steps (Enfoque Regenerativo) --- */
      .steps__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-20);
      }

      .step-card {
        display: flex;
        gap: var(--space-16);
        align-items: flex-start;
        padding: var(--space-24);
        background-color: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        transition: box-shadow var(--transition), transform var(--transition);
      }

      .step-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }

      .step-card__number {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: var(--color-forest-500);
        color: var(--color-neutral-50);
        font-family: var(--font-serif);
        font-size: var(--font-h2);
        font-weight: 500;
        line-height: 1;
      }

      .step-card__title {
        font-family: var(--font-serif);
        font-size: var(--font-h3);
        font-weight: 500;
        color: var(--color-text);
        margin-bottom: var(--space-4);
      }

      .step-card__desc {
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        line-height: var(--leading-normal);
        color: var(--color-text-muted);
      }

      .step-card__icon {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        color: var(--color-forest-400);
      }

      /* --- Philanthropy two-column --- */
      .philanthropy__intro {
        max-width: var(--container-sm);
        margin: 0 auto var(--space-40);
        text-align: center;
      }

      .philanthropy__intro p {
        font-family: var(--font-sans);
        font-size: var(--font-body);
        line-height: var(--leading-relaxed);
        color: var(--color-text-muted);
        margin-bottom: var(--space-16);
      }

      .philanthropy__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-24);
      }

      .philanthropy__column {
        padding: var(--space-24);
        border-radius: var(--radius-lg);
      }

      .philanthropy__column--yes {
        background-color: oklch(from var(--color-forest-50) l c h / 0.6);
        border: 1px solid var(--color-forest-200);
      }

      .philanthropy__column--no {
        background-color: oklch(from var(--color-earth-50) l c h / 0.5);
        border: 1px solid var(--color-earth-200);
      }

      .philanthropy__column-title {
        font-family: var(--font-serif);
        font-size: var(--font-h3);
        font-weight: 500;
        margin-bottom: var(--space-20);
        display: flex;
        align-items: center;
        gap: var(--space-8);
      }

      .philanthropy__column-title--yes {
        color: var(--color-forest-600);
      }

      .philanthropy__column-title--no {
        color: var(--color-earth-600);
      }

      .philanthropy__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-12);
      }

      .philanthropy__item {
        display: flex;
        gap: var(--space-12);
        align-items: flex-start;
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        line-height: var(--leading-normal);
        color: var(--color-text-muted);
      }

      .philanthropy__item-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 2px;
      }

      .philanthropy__item-icon--yes {
        color: var(--color-forest-500);
      }

      .philanthropy__item-icon--no {
        color: var(--color-earth-400);
      }

      .philanthropy__item strong {
        color: var(--color-text);
        font-weight: 600;
      }

      /* --- Functions grid --- */
      .functions__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-20);
      }

      .function-card {
        padding: var(--space-24);
        background-color: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        transition: box-shadow var(--transition), transform var(--transition);
      }

      .function-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }

      .function-card__icon {
        width: 40px;
        height: 40px;
        color: var(--color-forest-400);
        margin-bottom: var(--space-12);
      }

      .function-card__title {
        font-family: var(--font-serif);
        font-size: var(--font-h3);
        font-weight: 500;
        color: var(--color-text);
        margin-bottom: var(--space-4);
      }

      .function-card__phrase {
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        font-weight: 600;
        color: var(--color-forest-500);
        margin-bottom: var(--space-8);
        font-style: italic;
      }

      .function-card__desc {
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        line-height: var(--leading-normal);
        color: var(--color-text-muted);
      }

      /* --- Territory --- */
      .territory__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-32);
        align-items: center;
      }

      .territory__text p {
        margin-bottom: var(--space-16);
        font-family: var(--font-sans);
        font-size: var(--font-body);
        line-height: var(--leading-relaxed);
        color: var(--color-text-muted);
      }

      .territory__text p:last-child {
        margin-bottom: 0;
      }

      .territory__veredas {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
        margin-top: var(--space-16);
      }

      .territory__vereda {
        display: flex;
        align-items: center;
        gap: var(--space-8);
        padding: var(--space-8) var(--space-12);
        background-color: var(--color-forest-50);
        border-radius: var(--radius-md);
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        color: var(--color-forest-700);
      }

      .territory__vereda-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--color-forest-400);
        flex-shrink: 0;
      }

      .territory__map {
        width: 100%;
        max-width: 500px;
        margin-inline: auto;
      }

      .territory__stat {
        display: flex;
        align-items: center;
        gap: var(--space-12);
        margin-top: var(--space-20);
        padding: var(--space-16) var(--space-20);
        background-color: var(--color-forest-50);
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-forest-200);
      }

      .territory__stat-number {
        font-family: var(--font-serif);
        font-size: var(--font-display);
        font-weight: 500;
        color: var(--color-forest-500);
        line-height: 1;
        flex-shrink: 0;
      }

      .territory__stat-desc {
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        color: var(--color-text-muted);
      }

      /* --- Vision --- */
      .vision__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-20);
      }

      .vision-card {
        text-align: center;
        padding: var(--space-32) var(--space-24);
        background-color: oklch(from var(--color-neutral-50) l c h / 0.05);
        border: 1px solid oklch(from var(--color-neutral-300) l c h / 0.2);
        border-radius: var(--radius-lg);
        transition: transform var(--transition);
      }

      .vision-card:hover {
        transform: translateY(-2px);
      }

      .vision-card__number {
        font-family: var(--font-serif);
        font-size: var(--font-display-lg);
        font-weight: 500;
        color: var(--color-sun-200);
        margin-bottom: var(--space-8);
        line-height: 1;
      }

      .vision-card__title {
        font-family: var(--font-serif);
        font-size: var(--font-h3);
        font-weight: 500;
        color: var(--color-text-inverse);
        margin-bottom: var(--space-8);
      }

      .vision-card__desc {
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        line-height: var(--leading-normal);
        color: var(--color-neutral-300);
        max-width: 35ch;
        margin-inline: auto;
      }

      /* --- CTA Final --- */
      .cta-final {
        text-align: center;
        padding-block: var(--space-64);
        padding-inline: var(--space-16);
      }

      .cta-final__title {
        font-family: var(--font-serif);
        font-size: var(--font-display-lg);
        line-height: var(--leading-display);
        color: var(--color-text-inverse);
        margin-bottom: var(--space-16);
      }

      .cta-final__text {
        font-family: var(--font-sans);
        font-size: var(--font-body-lg);
        line-height: var(--leading-relaxed);
        color: var(--color-neutral-200);
        max-width: 55ch;
        margin: 0 auto var(--space-32);
      }

      .cta-final__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-16);
        justify-content: center;
      }

      /* --- Footer --- */
      .footer {
        background-color: var(--color-forest-800);
        color: var(--color-neutral-200);
        padding-block: var(--space-48) var(--space-32);
      }

      .footer__inner {
        max-width: var(--container-lg);
        margin-inline: auto;
        padding-inline: var(--space-16);
      }

      .footer__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-32);
      }

      .footer__brand {
        display: flex;
        flex-direction: column;
        gap: var(--space-12);
      }

      .footer__logo {
        display: flex;
        align-items: center;
        gap: var(--space-8);
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--color-neutral-50);
        text-decoration: none;
      }

      .footer__logo-icon {
        width: 24px;
        height: 24px;
        color: var(--color-forest-300);
      }

      .footer__tagline {
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        line-height: var(--leading-normal);
        color: var(--color-neutral-400);
        max-width: 35ch;
      }

      .footer__title {
        font-family: var(--font-serif);
        font-size: var(--font-h4);
        color: var(--color-neutral-50);
        margin-bottom: var(--space-12);
      }

      .footer__links {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
      }

      .footer__link {
        color: var(--color-neutral-300);
        text-decoration: none;
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        transition: color var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: var(--space-8);
      }

      .footer__link:hover {
        color: var(--color-sun-300);
      }

      .footer__link-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        color: var(--color-neutral-400);
      }

      .footer__bottom {
        margin-top: var(--space-32);
        padding-top: var(--space-20);
        border-top: 1px solid oklch(from var(--color-neutral-200) l c h / 0.15);
        text-align: center;
        font-family: var(--font-sans);
        font-size: var(--font-body-sm);
        color: var(--color-neutral-500);
      }

      /* --- Separator --- */
      .section__separator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-12);
        border: none;
        margin: var(--space-40) 0;
      }

      .section__separator::before,
      .section__separator::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(
          to right,
          transparent,
          var(--color-forest-200),
          transparent
        );
      }

      .section__separator-icon {
        width: 24px;
        height: 24px;
        color: var(--color-forest-300);
        flex-shrink: 0;
      }

      /* --- CTA link --- */
      .section__cta {
        text-align: center;
        margin-top: var(--space-32);
      }

      .section__cta .btn svg {
        width: 16px;
        height: 16px;
      }

      /* --- Reduced motion --- */
      @media (prefers-reduced-motion: reduce) {
        .principle-card,
        .step-card,
        .function-card,
        .vision-card {
          transition: none;
        }
        .principle-card:hover,
        .step-card:hover,
        .function-card:hover,
        .vision-card:hover {
          transform: none;
        }
      }
    }

    /* ---- UTILITIES / RESPONSIVE ---- */
    @layer utilities {
      /* sm: 640px+ */
      @media (min-width: 640px) {
        .section {
          padding-block: var(--space-64);
          padding-inline: var(--space-24);
        }

        .nav__links {
          display: flex;
        }

        .nav__toggle {
          display: none;
        }

        .manifiesto__grid {
          grid-template-columns: 1fr 1fr;
        }

        .steps__grid {
          grid-template-columns: 1fr 1fr;
        }

        .philanthropy__grid {
          grid-template-columns: 1fr 1fr;
        }

        .functions__grid {
          grid-template-columns: 1fr 1fr;
        }

        .vision__grid {
          grid-template-columns: 1fr 1fr 1fr;
        }

        .footer__grid {
          grid-template-columns: 2fr 1fr 1fr;
        }

        .territory__veredas {
          grid-template-columns: 1fr 1fr;
        }

        .section__inner {
          padding-inline: var(--space-24);
        }
      }

      /* md: 900px+ */
      @media (min-width: 900px) {
        .section {
          padding-block: var(--space-80);
          padding-inline: var(--space-32);
        }

        .section__inner {
          max-width: var(--container-md);
          padding-inline: var(--space-32);
        }

        .steps__grid {
          grid-template-columns: repeat(4, 1fr);
        }

        .step-card {
          flex-direction: column;
          text-align: center;
          align-items: center;
        }

        .functions__grid {
          grid-template-columns: repeat(3, 1fr);
        }

        .territory__grid {
          grid-template-columns: 1fr 1fr;
        }

        .cta-final {
          padding-block: var(--space-80);
        }
      }

      /* lg: 1200px+ */
      @media (min-width: 1200px) {
        .section {
          padding-block: var(--space-96);
          padding-inline: var(--space-40);
        }

        .section__inner {
          max-width: var(--container-lg);
          padding-inline: var(--space-40);
        }

        .nav__inner {
          padding-inline: var(--space-40);
        }
      }
    }

/* ==================================================================
   OVERRIDE RIZOMA: paleta inspirada en el logotipo oficial
   ------------------------------------------------------------------
   Escala forest -> teal  (nodos superiores del logotipo, #209299)
   Escala earth  -> bark  (marrón corteza de las ramas, #3f2720)
   Escala sun    -> se mantiene (oro/ocre de los nodos inferiores,
                                  #f0a42b aprox.)
   No se renombran variables: se reasignan los tokens en :root.
   ================================================================== */

:root {
  /* Teal (reemplaza la escala forest) */
  --color-forest-50:  oklch(96% 0.025 180);
  --color-forest-100: oklch(90% 0.05 182);
  --color-forest-200: oklch(78% 0.075 184);
  --color-forest-300: oklch(65% 0.095 185);
  --color-forest-400: oklch(52% 0.105 185);
  --color-forest-500: oklch(42% 0.10 186);
  --color-forest-600: oklch(33% 0.095 186);
  --color-forest-700: oklch(26% 0.085 186);
  --color-forest-800: oklch(19% 0.07 186);
  --color-forest-900: oklch(13% 0.05 185);

  /* Marrón corteza (reemplaza la escala earth) */
  --color-earth-50:  oklch(96% 0.012 45);
  --color-earth-100: oklch(90% 0.018 44);
  --color-earth-200: oklch(80% 0.03 43);
  --color-earth-300: oklch(68% 0.045 42);
  --color-earth-400: oklch(55% 0.06 41);
  --color-earth-500: oklch(44% 0.068 40);
  --color-earth-600: oklch(35% 0.062 38);
  --color-earth-700: oklch(27% 0.052 36);
  --color-earth-800: oklch(19% 0.04 34);
  --color-earth-900: oklch(12% 0.028 32);
}

/* Sección cálida (antes arcilla clara) ahora crema corteza clara */
.section--earth {
  background-color: var(--color-earth-50);
}

/* ==================================================================
   OVERRIDE RIZOMA: logotipo oficial, nav multipágina y componentes
   nuevos para las páginas internas
   ================================================================== */

/* --- Chip blanco redondeado para el logotipo (nav y footer) --- */
.nav__logo-chip,
.footer__logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 999px;
  line-height: 0;
  box-shadow: var(--shadow-sm);
}
.nav__logo-chip { padding: 4px 8px; }
.nav__logo-img { height: 30px; width: auto; display: block; }
.footer__logo-chip { padding: 5px 9px; }
.footer__logo-img { height: 36px; width: auto; display: block; }
.nav__logo, .footer__logo { gap: 0; }

/* --- Navegación con nueve enlaces: overlay hasta 1200px --- */
@media (min-width: 640px) and (max-width: 1199.98px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}
@media (min-width: 1200px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}
@media (max-width: 1199.98px) {
  .nav__cta { display: none; }
}
.nav__link[aria-current="page"] {
  color: var(--color-forest-600);
  background-color: var(--color-forest-50);
}
.nav__overlay-link[aria-current="page"] {
  color: var(--color-forest-500);
}

/* --- Hero de página interior --- */
.page-hero {
  min-height: auto;
  padding-block: var(--space-72) var(--space-64);
}
.page-hero .hero__title {
  font-size: var(--font-display-lg);
  max-width: 26ch;
}
.page-hero .hero__subtitle {
  margin-bottom: 0;
}

/* --- Lema en el hero --- */
.hero__lema {
  font-family: var(--font-serif);
  font-size: var(--font-h2);
  font-style: italic;
  line-height: var(--leading-tight);
  color: var(--color-sun-100);
  max-width: 42ch;
  margin: 0 auto var(--space-24);
}

/* --- Pills de ámbito (hero) --- */
.hero__scope {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: center;
  margin-bottom: var(--space-24);
}
.hero__scope span {
  font-family: var(--font-sans);
  font-size: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-sun-100);
  border: 1px solid oklch(from var(--color-sun-200) l c h / 0.35);
  border-radius: 999px;
  padding: var(--space-4) var(--space-12);
}

/* --- Grillas de tarjetas genéricas --- */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
}
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
.grid-cards--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
}
@media (min-width: 640px) { .grid-cards--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.card__kicker {
  font-family: var(--font-sans);
  font-size: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sun-700);
}
.card__title {
  font-family: var(--font-serif);
  font-size: var(--font-h3);
  color: var(--color-text);
}
.card__desc {
  font-family: var(--font-sans);
  font-size: var(--font-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--font-body-sm);
  font-weight: 600;
  color: var(--color-forest-600);
}
.card__link:hover { color: var(--color-forest-700); }

/* Tarjeta para fondos oscuros */
.card--glass {
  background-color: oklch(from var(--color-neutral-200) l c h / 0.08);
  border-color: oklch(from var(--color-neutral-200) l c h / 0.22);
}
.section--dark .card__title { color: var(--color-neutral-50); }
.section--dark .card__desc,
.section--dark .checklist li { color: var(--color-neutral-300); }
.section--dark .card__kicker { color: var(--color-sun-300); }

/* --- Listas con check / aspa --- */
.checklist {
  list-style: none;
  display: grid;
  gap: var(--space-12);
}
.checklist li {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: var(--font-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
.checklist li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-forest-500);
}
.checklist--no li svg { color: var(--color-earth-500); }
.section--dark .checklist li svg { color: var(--color-sun-300); }

/* --- Bloque de misión / lema --- */
.lemma-block {
  max-width: var(--container-md);
  margin-inline: auto;
  text-align: center;
}
.lemma-block .lemma {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--color-sun-100);
  margin-bottom: var(--space-16);
}
.lemma-block .mission {
  font-family: var(--font-sans);
  font-size: var(--font-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-200);
  max-width: 62ch;
  margin-inline: auto;
}
.lemma-block .note {
  font-family: var(--font-sans);
  font-size: var(--font-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-neutral-400);
  max-width: 62ch;
  margin: var(--space-24) auto 0;
}

/* --- Línea de tiempo (historia) --- */
.timeline {
  max-width: var(--container-md);
  margin-inline: auto;
}
.timeline__item {
  position: relative;
  padding: 0 0 var(--space-32) var(--space-28);
  border-left: 1px solid var(--color-forest-100);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-sun-500);
  box-shadow: 0 0 0 3px var(--color-bg);
}
.timeline__date {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-sun-700);
}
.timeline__place {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-body-sm);
  font-weight: 600;
  color: var(--color-earth-600);
}
.timeline__body {
  margin-top: var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* --- Bloques de grupos y pills (iniciativas) --- */
.group-block { margin-bottom: var(--space-40); }
.group-block:last-child { margin-bottom: 0; }
.group-block__title {
  font-family: var(--font-serif);
  font-size: var(--font-h3);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.group-block__desc {
  font-family: var(--font-sans);
  font-size: var(--font-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border-radius: 999px;
  background-color: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--font-body-sm);
  font-weight: 600;
  color: var(--color-text);
}
.pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-forest-400);
  flex-shrink: 0;
}
.pill--sun::before { background-color: var(--color-sun-500); }

/* --- Prosa centrada --- */
.prose {
  max-width: var(--container-md);
  margin-inline: auto;
  font-family: var(--font-sans);
  font-size: var(--font-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.prose p + p { margin-top: var(--space-16); }
.prose--sm { font-size: var(--font-body); color: var(--color-text-muted); }

/* --- Contacto --- */
.email-big {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--font-h2);
  color: var(--color-forest-600);
  word-break: break-all;
}
.email-big:hover { color: var(--color-forest-700); text-decoration: underline; }

/* Aviso de sitio en construccion */
.construction-banner {
  background: #f0a42b;
  color: #3f2720;
  text-align: center;
  padding: 0.55rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.construction-banner p { margin: 0; }