/* Readability uses medium body text, bold headings, larger labels, and stronger contrast throughout the homepage. */
/* The public homepage uses a calm palette without loading authenticated workspace styles. */
:root { color-scheme: light; --paper: #f5f8f7; --ink: #133e38; --muted: #4b6258; --line: #dce3da; --teal: #087f83; --nav-height: 84px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 24px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 3px; }
::selection { background: #d6e9d8; color: #183c35; }
.wrap { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; padding: 12px 18px; background: var(--ink); color: white; transform: translateY(-180%); z-index: 110; }
.skip-link:focus { transform: none; }
/* A translucent sticky surface stays legible over light and dark sections. */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(245, 248, 247, .94); border-bottom: 1px solid rgba(24, 60, 53, .09); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(24, 60, 53, .06); }
.header-inner { min-height: 84px; display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font: 800 19px "Manrope", sans-serif; letter-spacing: -.7px; overflow-wrap: anywhere; }
.wordmark img { flex-shrink: 0; }
.site-header nav { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.site-header nav > a { padding: 12px 16px; border-radius: 7px; transition: color .2s, background .2s; }
.site-header nav > a[aria-current], .site-header nav > a:not(.nav-login):hover { color: var(--ink); background: #e7eee5; }
.site-header nav a:hover, .text-link:hover { color: var(--teal); }
.site-header nav > .nav-login { margin-left: 14px; padding: 12px 18px; background: var(--ink); color: white; white-space: nowrap; }
.site-header nav > .nav-login:hover { background: #2c584a; color: white; }
.nav-login span { margin-left: 16px; }
/* Align the headline and workflow columns at their top edge instead of vertically centering the copy. */
.hero { display: grid; grid-template-columns: 1fr 1.06fr; gap: 56px; align-items: start; padding-block: 88px 80px; }
.eyebrow { font-size: 12px; letter-spacing: 1.65px; font-weight: 600; line-height: 1.8; margin: 0 0 28px; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #709679; vertical-align: middle; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Manrope", sans-serif; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(64px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -5px; font-weight: 700; margin-bottom: 28px; }
em { font-family: inherit; font-style: normal; font-weight: 600; }
h1 em { color: #61816b; }
.hero-description { font-size: 16px; line-height: 1.85; color: var(--muted); max-width: 410px; margin-bottom: 30px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 25px; min-height: 48px; padding: 15px 22px; font-size: 14px; font-weight: 600; border-radius: 8px; transition: background .2s, transform .2s, box-shadow .2s; }
.button-primary { background: var(--ink); color: #fff; }
.button-primary:hover { background: #2c584a; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(24, 60, 53, .12); }
.text-link { font-size: 14px; }
.text-link span { margin-left: 10px; }
.hero-footnote { font-size: 12px; color: var(--muted); margin: 28px 0 0; }
/* A conceptual circuit visual illustrates information flow without implying live prices or results. */
.gradient-word { background: linear-gradient(105deg, #087f83, #428d64); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy { min-width: 0; }
/* Soft stage colors and an open layout replace the dark rectangular workflow card. */
.workflow-visual { --accent: #297d68; --accent-soft: #e4f4eb; position: relative; min-width: 0; color: var(--ink); }
.workflow-visual[data-stage="1"] { --accent: #237d91; --accent-soft: #e3f2f6; }
.workflow-visual[data-stage="2"] { --accent: #637c36; --accent-soft: #eef3e1; }
.workflow-top, .workflow-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 23px; font: 600 12px "DM Sans", sans-serif; letter-spacing: 1px; color: #425f52; }
/* Match the eyebrow line height so both top labels share a baseline. */
.workflow-top { justify-content: center; padding-top: 0; padding-bottom: 26px; line-height: 1.8; }
.workflow-top > span { display: flex; align-items: center; gap: 8px; }
.workflow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.workflow-visual button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.workflow-canvas { position: relative; width: min(100%, 350px); aspect-ratio: 1; margin: 0 auto 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #d4e6db; background: radial-gradient(circle at 35% 30%, #ffffff, #eaf5ed 65%, #dceee2); box-shadow: 0 0 0 10px #e9f1eb80, 0 25px 60px -32px #799f8e60, inset 0 0 35px #ffffffa0; overflow: hidden; }
.workflow-grid { position: absolute; inset: 0; background-image: radial-gradient(#65988640 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.workflow-wires { position: absolute; width: 100%; height: 100%; opacity: .75; }
/* The circular core and orbit create a gentle focal point inside the larger mint disc. */
.workflow-core { position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; width: 112px; height: 112px; border-radius: 50%; background: linear-gradient(145deg, #fff, var(--accent-soft)); border: 1px solid #c5dfce; box-shadow: 0 12px 28px #527d6617, inset 0 1px 0 #fff; color: var(--accent); transition: color .5s; }
.workflow-core > svg { width: 38px; height: 38px; stroke: currentColor; stroke-width: 1.3; }
.workflow-core > span[data-core-label] { font: 700 13px "Manrope", sans-serif; letter-spacing: 2px; }
html[lang="es"] .workflow-core > span[data-core-label] { max-width: 100%; padding-inline: 8px; box-sizing: border-box; text-align: center; font-size: 11px; line-height: 1.3; letter-spacing: .3px; }
html[lang="es"] .workflow-step { position: relative; justify-content: center; padding-inline: 24px; text-align: center; overflow-wrap: anywhere; }
html[lang="es"] .workflow-step > i { position: absolute; right: 10px; margin-left: 0; }
.core-orbit { position: absolute; inset: -22px; border: 1px solid transparent; border-top-color: var(--accent); border-radius: 50%; opacity: .65; animation: circuit-orbit 14s linear infinite paused; }
.flow-packet { stroke: var(--accent); animation: circuit-flow 3s linear infinite paused; }
.workflow-visual.is-playing .flow-packet, .workflow-visual.is-playing .core-orbit { animation-play-state: running; }
.canvas-label { position: absolute; font: 600 12px "DM Sans", sans-serif; letter-spacing: 1px; color: #425f52; }
.canvas-input { top: 35px; } .canvas-output { bottom: 35px; }
.workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 22px 0; border: 1px solid #d9e6dc; border-radius: 30px; padding: 5px; gap: 5px; background: #ffffffa6; }
.workflow-step { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 10px 14px; border: 0; border-radius: 24px; background: transparent; color: #425f52; font: 600 14px "DM Sans", sans-serif; cursor: pointer; transition: background .4s, color .4s; }
.workflow-step > span { font-size: 12px; opacity: 1; }
.workflow-step > i { margin-left: auto; font-style: normal; }
.workflow-step:hover { background: #edf4ee; }
.workflow-step.is-active { background: var(--accent-soft); color: var(--accent); }
.workflow-description { padding: 24px 28px; min-height: 205px; text-align: center; }
.workflow-stage-label { font: 600 12px "DM Sans", sans-serif; letter-spacing: 1.3px; color: var(--accent); }
.workflow-description h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.6px; margin: 12px 0 9px; }
.workflow-description p { font-size: 14px; line-height: 1.8; color: #425f52; margin: 0; }
.workflow-bottom { flex-wrap: wrap; justify-content: center; column-gap: 24px; border-top: 1px solid #dce7de; padding-block: 14px; font-size: 12px; }
/* Motion is limited to the concept visual and one-time section reveals. */
@keyframes circuit-flow { to { stroke-dashoffset: -202; } }
@keyframes circuit-orbit { to { transform: rotate(360deg); } }
.reveal-ready { transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .3, 1); }
.reveal-ready:not(.is-visible) { opacity: 0; transform: translateY(24px); }
.intro-line { border-block: 1px solid var(--line); padding-block: 25px; display: flex; gap: 25px; justify-content: space-between; align-items: center; }
.intro-line p { font-size: 15px; color: var(--muted); margin: 0; }
.intro-line > span { font-size: 19px; }
/* Present-day topics use a single open grid with thin dividers instead of boxed cards. */
.section-space { padding-block: 90px; }
/* Align the section title with the first card instead of reserving an empty label column. */
.section-heading { display: block; }
.section-heading > .eyebrow { margin-bottom: 22px; }
h2 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.22; letter-spacing: -1.8px; margin-bottom: 20px; }
.section-heading > div { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 64px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > div > p { font-size: 16px; line-height: 1.85; color: var(--muted); margin-bottom: 4px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 46px; }
.pillars article { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding: 27px 32px 0; position: relative; }
.pillars article:first-child { padding-left: 0; }
.pillars article:last-child { padding-right: 0; }
.pillars article + article { border-left: 1px solid var(--line); }
.pillar-number { font-size: 12px; color: var(--muted); position: absolute; right: 30px; top: 30px; }
.pillar-icon { display: block; width: 48px; height: 48px; padding: 10px; border-radius: 12px; background: #e8eee4; stroke: #466c56; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 28px; }
h3 { font-size: 18px; line-height: 1.4; letter-spacing: -.45px; margin-bottom: 13px; }
.pillars p { font-size: 15px; line-height: 1.9; color: var(--muted); max-width: 310px; min-height: 100px; }
/* Keep category labels on one baseline even when individual descriptions wrap differently. */
.pillar-tag { margin-top: auto; padding-top: 18px; font-size: 12px; letter-spacing: 1.4px; color: #56715e; }
/* A darker future section signals a change of topic while keeping contrast comfortable. */
.future { background: radial-gradient(ellipse at 0% 100%, #254f3e, transparent 65%), #173c34; color: #f3f6ec; }
.future-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-block: 85px; }
.future .eyebrow { color: #b3c8b6; }
.future h2 { font-size: clamp(37px, 4vw, 52px); }
.future h2 em { color: #b2cbaa; }
.future-lead { max-width: 390px; font-size: 16px; line-height: 1.9; color: #c0cfc4; }
.future-link { display: inline-flex; gap: 48px; padding-bottom: 9px; border-bottom: 1px solid #789485; margin-top: 16px; font-size: 14px; }
.future-link:hover { color: #c4dfb8; }
.future-topics article { display: flex; gap: 28px; border-bottom: 1px solid #3a5a4c; padding: 24px 0; }
.future-topics article:first-child { padding-top: 0; }
.future-topics article:last-child { border-bottom: 0; padding-bottom: 0; }
.future-topics article > span { padding-top: 4px; font-size: 12px; color: #aec5b3; }
.future-topics h3 { font-size: 17px; margin-bottom: 9px; }
.future-topics p { font-size: 15px; line-height: 1.8; color: #c0cfc4; margin-bottom: 0; }
.perspective { text-align: center; padding-block: 100px; }
.perspective .eyebrow { margin-bottom: 25px; }
.perspective h2 em { color: #6b806a; }
.perspective > p:not(.eyebrow) { max-width: 460px; margin: 0 auto 30px; color: var(--muted); font-size: 16px; line-height: 1.9; }
/* The footer combines a closing invitation, clear navigation, and live contact details. */
.site-footer { background: #102d29; color: #f1f5ed; padding-top: 62px; }
.site-footer a:focus-visible { outline-color: #c2d8b0; }
.footer-invitation { display: flex; justify-content: space-between; align-items: center; gap: 36px; padding-bottom: 48px; border-bottom: 1px solid #35504a; }
.footer-invitation .eyebrow { color: #b5c6b9; font-size: 12px; margin-bottom: 17px; }
.footer-invitation h2 { font-size: clamp(32px, 3.4vw, 45px); margin: 0; }
.footer-invitation h2 em { color: #b9cfac; }
.footer-button { background: #deebd3; color: #173c34; white-space: nowrap; }
.footer-button:hover { background: #f0f5e9; transform: translateY(-2px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr .9fr .9fr 1.2fr; gap: 40px; padding-block: 48px 55px; }
.footer-grid > * { min-width: 0; }
.footer-brand .wordmark { font-size: 20px; }
.footer-brand > p { max-width: 235px; color: #c9d8cf; font-size: 15px; line-height: 1.9; margin: 22px 0 27px; }
.footer-signature { font-size: 12px; letter-spacing: 1.5px; color: #afc5b3; }
.footer-grid h3 { font: 700 14px "DM Sans", sans-serif; letter-spacing: .2px; margin: 4px 0 23px; }
.footer-links { display: flex; align-items: flex-start; flex-direction: column; gap: 15px; }
.footer-links h3 { margin-bottom: 8px; }
.footer-links > a { font-size: 14px; line-height: 1.7; color: #c9d8cf; overflow-wrap: anywhere; }
.footer-links > a span { margin-left: 12px; }
.footer-links > a:hover, .footer-contact a:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }
.footer-contact dl { margin: 0; }
.footer-contact dl > div + div { margin-top: 17px; }
.footer-contact dt { color: #c9d8cf; font-size: 12px; margin-bottom: 5px; }
.footer-contact dd { margin: 0; }
.footer-contact address, .footer-contact a, .footer-contact .contact-pending { font-size: 14px; line-height: 1.8; font-style: normal; overflow-wrap: anywhere; white-space: pre-line; }
.footer-contact .contact-pending { color: #c9d8cf; }
.footer-bottom { border-top: 1px solid #35504a; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-block: 25px; color: #c9d8cf; }
.footer-bottom p, .footer-bottom a { font-size: 12px; margin: 0; line-height: 1.8; }
.footer-bottom > a { color: #f1f5ed; }
.footer-bottom > a span { margin-left: 12px; }
/* Tablet and mobile retain all navigation and stack the editorial sections without horizontal scrolling. */
@media (max-width: 1000px) {
    .wrap { width: calc(100% - 64px); }
    .hero { gap: 28px; padding-block: 75px; }
    h1 { letter-spacing: -2.5px; }
    .section-heading > div { gap: 35px; }
    .future-inner { gap: 50px; }
    .pillars article { padding-inline: 22px; }
    .footer-grid { grid-template-columns: 1.2fr 1fr; gap: 40px 70px; }
}
@media (max-width: 700px) {
    .wrap { width: calc(100% - 40px); }
    :root { --nav-height: 130px; }
    .header-inner { min-height: 0; flex-direction: column; align-items: stretch; gap: 13px; padding-block: 16px 12px; }
    .wordmark { font-size: 16px; }
    .site-header nav { gap: 3px; justify-content: space-between; font-size: 13px; }
    .site-header nav > a { padding: 10px 6px; }
    .site-header nav > .nav-login { margin-left: auto; padding: 10px 9px; }
    .nav-login span { margin-left: 8px; }
    .hero { grid-template-columns: 1fr; padding-block: 55px 40px; gap: 45px; }
    h1 { font-size: clamp(62px, 13vw, 82px); letter-spacing: -3.6px; }
    .hero-description { font-size: 16px; }
    .workflow-visual { width: min(100%, 520px); justify-self: center; }
    .workflow-top { padding: 15px; font-size: 12px; }
    .workflow-steps { margin-inline: 0; gap: 2px; }
    .workflow-step { font-size: 13px; gap: 5px; padding: 9px 6px; }
    .workflow-step > i { display: none; }
    .workflow-description { padding: 22px; min-height: 260px; }
    .workflow-canvas { width: min(calc(100% - 20px), 330px); }
    .section-space { padding-block: 60px; }
    .section-heading > div { grid-template-columns: 1fr; gap: 22px; }
    .section-heading > div > p { max-width: 440px; }
    .pillars { grid-template-columns: 1fr; margin-top: 20px; }
    .pillars article, .pillars article:first-child, .pillars article:last-child { padding: 27px 0; border-left: 0; }
    .pillar-icon { margin-bottom: 22px; }
    .pillars p { max-width: 100%; min-height: 0; }
    .pillar-number { right: 2px; }
    .future-inner { grid-template-columns: 1fr; padding-block: 60px; gap: 45px; }
    .future-topics article { gap: 20px; }
    .site-footer { padding-top: 42px; }
    .footer-invitation { flex-direction: column; align-items: flex-start; gap: 25px; padding-bottom: 35px; }
    .footer-grid { grid-template-columns: 1fr 1fr; padding-block: 35px; gap: 35px 20px; }
    .footer-brand, .footer-contact { grid-column: 1 / -1; }
    .footer-brand > p { max-width: 310px; margin-block: 18px; }
    .footer-contact dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .footer-contact dl > div + div { margin: 0; }
    .footer-contact dl > div:last-child { grid-column: 1 / -1; }
    .footer-bottom { gap: 15px; }
    .footer-bottom p:first-child { width: 100%; }
}
/* Legal links wrap naturally and keep the same accessible contrast as footer navigation. */
/* Center each row of legal links, including wrapped rows on smaller screens. */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; gap: 16px 24px; padding: 24px 0; border-top: 1px solid #42655f; font-size: 14px; font-weight: 600; }
.footer-legal a { color: #e2ede7; text-decoration: none; }
.footer-legal button { color: #e2ede7; font: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
/* Native anchor jumps remain comfortable for visitors who request reduced motion. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button, .site-header, .site-header nav > a { transition: none; } .button:hover { transform: none; } }

/* Reduced-motion settings show every section immediately and keep the workflow still. */
@media (prefers-reduced-motion: reduce) { .flow-packet, .core-orbit { animation: none; } .reveal-ready { opacity: 1 !important; transform: none !important; transition: none; } .workflow-step, .workflow-core { transition: none; } }