:root {
                --ink: #27312c;
                --muted: #6f7973;
                --forest: #536b57;
                --leaf: #81966e;
                --clay: #a66f50;
                --sky: #6d8992;
                --pale: #f1f4ee;
                --sand: #f7f2e9;
                --line: #e6eae5;
            }
            body, input, select, textarea {
                font-family: "Source Sans Pro", sans-serif !important;
                color: var(--ink);
            }
            section, #header, hr, .major {
                border: 0 !important;
                box-shadow: none !important;
                padding: 0 !important;
            }
            #sidebar {
                position: fixed !important;
                inset: 0 auto 0 0;
                height: 100vh !important;
                width: 18em !important;
                overflow: hidden !important;
                z-index: 10000;
                background: #fff;
                border-right: 1px solid #f2f2f2 !important;
            }
            #wrapper {
                padding-left: 18em !important;
            }
            .inner {
                padding: 2.2em 4em 0 !important;
                max-width: 1600px !important;
                margin: auto;
                width: 100%;
                box-sizing: border-box;
            }
            .eyebrow {
                display: block;
                font-size: 0.65em;
                font-weight: 900;
                text-transform: uppercase;
                letter-spacing: 4px;
                color: #98a19b;
                margin-bottom: 16px;
            }
            .hero {
                display: grid;
                grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
                gap: 4.8em;
                align-items: start;
                padding-bottom: 4em !important;
            }
            .hero h1 {
                font-size: 4.45em;
                letter-spacing: -3.5px;
                line-height: 0.96;
                margin: 0.1em 0 0.35em;
                color: var(--ink);
                max-width: 780px;
            }
            .hero h1 em {
                font-style: normal;
                color: var(--forest);
            }
            .lead {
                font-size: 1.18em;
                line-height: 1.75;
                color: var(--muted);
                max-width: 720px;
            }
            .actions {
                display: flex;
                gap: 0.7em;
                flex-wrap: wrap;
                margin-top: 2em;
            }
            .action {
                display: inline-flex;
                align-items: center;
                text-decoration: none;
                border-radius: 99px;
                padding: 0.8em 1.25em;
                font-size: 0.78em;
                font-weight: 700;
                border: 1px solid var(--line);
                color: var(--ink);
            }
            .action.primary {
                background: var(--forest);
                border-color: var(--forest);
                color: #fff;
            }
            .hero-image {
                width: 100%;
                max-width: 450px;
                aspect-ratio: 1;
                border-radius: 50%;
                justify-self: center;
                background: #edf2eb url("/images/observatorio-planeta-v2.webp") center/cover no-repeat;
                position: relative;
                overflow: hidden;
                box-sizing: border-box;
                box-shadow: 0 35px 90px rgba(45, 65, 51, 0.2);
            }
            .block {
                border-top: 1px solid var(--line);
                padding: 4em 0 !important;
            }
            .head {
                display: grid;
                grid-template-columns: 180px minmax(0, 870px);
                gap: 2em;
                margin-bottom: 2.2em;
            }
            .head h2 {
                font-size: 2.25em;
                letter-spacing: -0.8px;
                margin: 0;
                color: var(--ink);
            }
            .head p {
                margin: 0;
                color: var(--muted);
                line-height: 1.72;
            }
            .path {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1em;
            }
            .step {
                padding: 1.7em;
                border-radius: 16px;
                background: var(--pale);
                text-decoration: none;
                color: inherit;
                position: relative;
                min-height: 205px;
            }
            .step:nth-child(2) {
                background: var(--sand);
            }
            .step:nth-child(3) {
                background: #edf2f3;
            }
            .step small {
                font-size: 0.65em;
                text-transform: uppercase;
                letter-spacing: 1.2px;
                color: var(--clay);
            }
            .step h3 {
                font-size: 1.32em;
                margin: 0.35em 0 0.5em;
                color: var(--ink);
            }
            .step p {
                font-size: 0.9em;
                line-height: 1.62;
                color: var(--muted);
            }
            .step b {
                position: absolute;
                right: 1.3em;
                bottom: 1.1em;
                color: var(--forest);
            }
            .pulse {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 1em;
            }
            .number {
                padding: 1.5em;
                border: 1px solid var(--line);
                border-radius: 14px;
            }
            .number small {
                display: block;
                text-transform: uppercase;
                letter-spacing: 1.1px;
                color: #939d96;
            }
            .number strong {
                display: block;
                font-size: 2.25em;
                line-height: 1;
                color: var(--forest);
                margin: 0.3em 0;
            }
            .number span {
                font-size: 0.78em;
                color: var(--muted);
            }
            .honesty {
                margin-top: 1em;
                font-size: 0.78em;
                color: #949c97;
            }
            .atlas {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1em;
            }
            .portal {
                display: grid;
                grid-template-columns: 95px 1fr;
                gap: 1.2em;
                padding: 1.5em;
                text-decoration: none;
                color: inherit;
                border: 1px solid var(--line);
                border-radius: 16px;
                transition: 0.25s;
            }
            .portal:hover {
                transform: translateY(-3px);
                border-color: #b8c4b9;
            }
            .portal-mark {
                width: 95px;
                aspect-ratio: 1;
                border-radius: 50%;
                display: grid;
                place-items: center;
                font-size: 1.7em;
                background: var(--pale);
                color: var(--forest);
            }
            .portal:nth-child(2n) .portal-mark {
                background: var(--sand);
                color: var(--clay);
            }
            .portal h3 {
                font-size: 1.15em;
                color: var(--ink);
                margin: 0.1em 0 0.35em;
            }
            .portal p {
                font-size: 0.86em;
                line-height: 1.55;
                color: var(--muted);
                margin: 0;
            }
            .portal span {
                display: block;
                font-size: 0.69em;
                color: var(--forest);
                margin-top: 0.6em;
            }
            .today {
                display: grid;
                grid-template-columns: 1.1fr 0.9fr;
                gap: 1em;
            }
            .local, .encounter {
                border-radius: 18px;
                padding: 2em;
                min-height: 245px;
            }
            .local {
                background: #405447;
                color: #fff;
            }
            .local small, .encounter small {
                font-size: 0.65em;
                text-transform: uppercase;
                letter-spacing: 1.2px;
            }
            .local small {
                color: #bdcbbf;
            }
            .local h3 {
                color: #fff;
                font-size: 1.55em;
                margin: 0.35em 0;
            }
            .local p {
                color: #dce5de;
                line-height: 1.65;
            }
            .local a {
                color: #fff;
                font-size: 0.8em;
            }
            .encounter {
                background: var(--sand);
                display: grid;
                grid-template-columns: 1fr 120px;
                gap: 1em;
            }
            .encounter h3 {
                font-size: 1.35em;
                margin: 0.35em 0;
                color: var(--ink);
            }
            .encounter em {
                display: block;
                color: var(--muted);
                font-size: 0.85em;
            }
            .encounter p {
                font-size: 0.86em;
                line-height: 1.55;
                color: var(--muted);
            }
            .encounter a {
                color: var(--forest);
                font-size: 0.8em;
            }
            .species-image {
                width: 120px;
                height: 160px;
                border-radius: 60px;
                object-fit: cover;
                background: #e8e3d8;
            }
            .news {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1em;
            }
            .news a {
                text-decoration: none;
                color: inherit;
                border: 1px solid var(--line);
                border-radius: 14px;
                padding: 1.4em;
                display: flex;
                flex-direction: column;
                min-height: 155px;
            }
            .news small {
                color: #949d97;
            }
            .news h3 {
                font-size: 1.04em;
                line-height: 1.4;
                color: var(--ink);
                margin: 0.4em 0 auto;
            }
            .news span {
                font-size: 0.7em;
                color: var(--forest);
                margin-top: 1em;
            }
            .manifesto {
                background: linear-gradient(135deg, #edf2eb, #f7f1e7);
                border-radius: 20px;
                padding: 3em;
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: 2em;
            }
            .manifesto h2 {
                font-size: 2em;
                margin: 0 0 0.35em;
                color: var(--ink);
            }
            .manifesto p {
                color: var(--muted);
                max-width: 800px;
                margin: 0;
                line-height: 1.65;
            }
            .manifesto a {
                white-space: nowrap;
            }
            .empty {
                color: #999;
                font-style: italic;
            }
            .footer {
                padding: 4em 0 2em;
                border-top: 1px solid var(--line);
                opacity: 0.4;
                text-align: right;
            }

            .footer-wordmark {
                display: flex;
                justify-content: flex-end;
            }

            .bio-wordmark {
                display: inline-block;
                text-align: center;
                line-height: 1;
                font-family: "Georgia", "Times New Roman", serif;
            }

            .bio-wordmark strong {
                display: block;
                font-size: 1.15em;
                font-weight: 400;
                letter-spacing: -0.4px;
                color: #81966e;
                line-height: 1;
                font-family: inherit;
            }

            .bio-wordmark small {
                display: block;
                margin-top: 2px;
                font-size: 0.43em;
                font-weight: 700;
                letter-spacing: 1.8px;
                text-transform: uppercase;
                color: #a66f50;
                line-height: 1;
                font-family: inherit;
            }

            @media (max-width: 1280px) {
                #sidebar {
                    position: relative !important;
                    width: 100% !important;
                    height: auto !important;
                }
                #wrapper {
                    padding-left: 0 !important;
                }
                .hero {
                    min-height: auto;
                    grid-template-columns: 1fr;
                }
                .hero-image {
                    min-height: 0;
                    max-width: 400px;
                }
                .pulse {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
            @media (max-width: 760px) {
                .inner {
                    padding: 1.7em 1.4em 0 !important;
                }
                .hero h1 {
                    font-size: 3em;
                }
                .hero {
                    gap: 2.5em;
                }
                .hero-image {
                    min-height: 0;
                    max-width: 320px;
                    border-radius: 50%;
                }
                .head {
                    grid-template-columns: 1fr;
                    gap: 0.7em;
                }
                .path, .pulse, .atlas, .today, .news {
                    grid-template-columns: 1fr;
                }
                .portal {
                    grid-template-columns: 70px 1fr;
                }
                .portal-mark {
                    width: 70px;
                }
                .encounter {
                    grid-template-columns: 1fr;
                }
                .species-image {
                    width: 100%;
                    height: 210px;
                    border-radius: 12px;
                }
                .manifesto {
                    grid-template-columns: 1fr;
                    padding: 2em;
                }
            }