:root {
      --navy: #1B3162;
      --navy-dark: #14254A;
      --navy-light: #6B7999;
      --green: #24C42F;
      --green-dark: #1B9323;
      --white: #FFFFFF;
      --surface: rgba(255,255,255,0.06);
      --border: rgba(255,255,255,0.15);
      --page-bg: var(--navy);
      --focus: var(--green);
      --ink: var(--white);
      --ink-muted: rgba(255,255,255,0.72);
      --ink-faint: rgba(255,255,255,0.62);
    }
    #site-root[data-theme="white"] {
      --page-bg: var(--white);
      --focus: var(--navy);
      --ink: var(--navy);
      --ink-muted: rgba(27,49,98,0.72);
      --ink-faint: rgba(27,49,98,0.7);
      --surface: rgba(27,49,98,0.04);
      --border: rgba(27,49,98,0.12);
    }
    .logo-white-version { display: inline-block; }
    .logo-navy-version { display: none; }
    #site-root[data-theme="white"] .logo-white-version { display: none; }
    #site-root[data-theme="white"] .logo-navy-version { display: inline-block; }
    .hero-split { position: relative; min-height: 420px; overflow: hidden; }
    .section.hero-split { padding-top: 34px; padding-bottom: 56px; }
    .hero-split-text { position: relative; z-index: 1; }
    .hero-mesh-panel { position: absolute; top: 0; bottom: 0; right: 0; width: 38%; max-width: 480px; z-index: 0; background: var(--mesh-white) center / cover no-repeat; }
    #site-root[data-theme="white"] .hero-mesh-panel { background-image: var(--mesh-color); }
    .hero-split.hero-left .hero-mesh-panel { right: auto; left: 0; }
    .hero-split.hero-left .hero-split-text .stack { margin-left: auto; }
    .section.hero-split.hero-left { display: flex; align-items: center; padding-bottom: 24px; }
    .section.hero-split.hero-left > .hero-split-text { width: 100%; }
    .celula-icon { width: 20px; height: 20px; flex-shrink: 0; }
    #site-root[data-theme="navy"] .celula-icon { filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.95)) drop-shadow(0 0 5px rgba(255,255,255,0.55)); }
    .skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--green); color: var(--navy); font-family: 'Gordita', sans-serif; font-weight: 700; padding: 10px 16px; border-radius: 8px; }
    .skip-link:focus { left: 16px; }
    :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
    header.row { position: sticky; top: 0; z-index: 40; background: var(--page-bg); }
    main [id], main section { scroll-margin-top: 96px; }
    .nav-link { font-family: 'Gordita', sans-serif; font-size: 17px; font-weight: 500; line-height: 1.55; padding: 10px 0; display: inline-block; color: var(--ink); }
    .nav-active { font-weight: 700; box-shadow: inset 0 -2px 0 var(--green); }
    .nav-link:hover { text-decoration: none; box-shadow: inset 0 -2px 0 var(--green); }
    .footer-link { display: inline-block; padding: 10px 0; }
    .menu-toggle { display: none; }
    .eyebrow-accent { display: inline-flex; align-items: center; gap: 10px; }
    .eyebrow-accent::before { content: ""; width: 18px; height: 2px; background: var(--green); flex-shrink: 0; }
    .section-tight { padding: 32px 0; }
    .hero-lead { max-width: 520px; }
    .steps { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
    .step { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
    .step .celula-icon { width: 16px; height: 16px; margin-top: 3px; }
    .step strong { color: var(--ink); font-weight: 700; }
    .product-tagline { font-style: italic; color: var(--ink); font-size: 15px; }
    .diagram { color: var(--ink); width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
    .diagram text { font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; fill: currentColor; }
    .area { border-top: 3px solid var(--navy); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
    .area.accent { border-top-color: var(--green); }
    #site-root[data-theme="navy"] .area { border-top-color: var(--white); }
    #site-root[data-theme="navy"] .area.accent { border-top-color: var(--green); }
    .area h3 { font-size: 22px; color: var(--ink); }
    .area p { font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
    .list-reset, ol.stepper, ol.steps, ol.method-list, ul.area-list { list-style: none; margin: 0; padding: 0; }
    .stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; position: relative; }
    .stepper::before { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: 2px; background: var(--border); }
    .stepper-item { position: relative; display: flex; flex-direction: column; gap: 12px; }
    .stepper-num { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 15px; position: relative; z-index: 1; }
    #site-root[data-theme="navy"] .stepper-num { background: var(--white); color: var(--navy); }
    .stepper-item:last-child .stepper-num { background: var(--green); color: var(--navy); }
    .stepper-item h3 { font-size: 20px; color: var(--ink); }
    .stepper-item p { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
    .section.hero-figure { padding-top: 34px; padding-bottom: 48px; }
    .hero-figure .grid-2 { grid-template-columns: 1fr 1.25fr; }
    .celula-figure { position: relative; width: 100%; max-width: 620px; aspect-ratio: 700 / 600; margin: 0 0 0 auto; color: var(--ink); }
    .celula-figure .cel { position: absolute; left: 21.71%; top: 17%; width: 56.57%; height: 66%; background: var(--cel-white) center / contain no-repeat; }
    #site-root[data-theme="white"] .celula-figure .cel { background-image: var(--cel-color); }
    .celula-figure svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .celula-figure .cel-label { font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 19px; fill: currentColor; }
    .celula-figure .cel-center { font-family: 'Renogare', sans-serif; font-size: 17px; fill: currentColor; }
    #site-root { overflow-x: clip; }
    /* texto justificado */
    main p:not(.eyebrow):not(.tag):not(.form-note):not(.product-tagline), main li, main .step span, main .stepper-item p { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; }
    main [style*="text-align:center"] p, main [style*="text-align:center"] li { text-align: center; text-align-last: center; }
    .grid-2.sys-grid { grid-template-columns: 1fr 1.25fr; }
    .socias-figure { width: 60%; aspect-ratio: 3 / 2; margin: 0 auto; border-radius: 12px; background: var(--foto-navy) center 28% / cover no-repeat; }
    #site-root[data-theme="white"] .socias-figure { background-image: var(--foto-color); }
    #site-root[data-theme="navy"] .btn-secondary.btn-outline-green { border-color: var(--green); }
    .sys-figure { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1000 / 1000; margin: 0 auto; color: var(--ink); }
    .sys-figure .img { position: absolute; inset: calc(-1 * var(--diag-pad, 0%)); background: var(--diag-white) center / contain no-repeat; }
    #site-root[data-theme="white"] .sys-figure .img { background-image: var(--diag-color); }
    .sys-figure svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .sys-figure .sys-label { font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 31.8px; fill: currentColor; paint-order: stroke; stroke: var(--page-bg); stroke-width: 7px; stroke-linejoin: round; }
    .field { display: flex; flex-direction: column; gap: 6px; }
    .field label { font-family: 'Gordita', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); }
    .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: 'Gordita', sans-serif; font-size: 16px; }
    .field select option { color: var(--navy); }
    .field textarea { min-height: 120px; resize: vertical; }
    .form-note { font-size: 13px; color: var(--ink-faint); }
    .req { display: inline-block; margin-left: 4px; }
    .form-note .req { margin: 0 4px 0 2px; }
    .theme-switch { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
    .theme-switch button { border: none; border-radius: 999px; padding: 7px 14px; font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; background: transparent; color: var(--ink-muted); }
    .theme-switch button[data-active="true"] { background: var(--navy); color: var(--white); }
    header.row > .btn-primary { height: 39px; padding: 0 20px; font-size: 14px; }
    #site-root[data-theme="white"] .theme-switch button[data-active="true"] { background: var(--white); color: var(--navy); box-shadow: 0 0 0 1px var(--border); }
    @font-face {
      font-family: 'Renogare';
      font-weight: 400;
      font-display: swap;
      src: url(fonts/renogare-400.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Gordita';
      font-weight: 400;
      font-display: swap;
      src: url(fonts/gordita-400.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Gordita';
      font-weight: 500;
      font-display: swap;
      src: url(fonts/gordita-500.woff2) format('woff2');
    }
    @font-face {
      font-family: 'Gordita';
      font-weight: 700;
      font-display: swap;
      src: url(fonts/gordita-700.woff2) format('woff2');
    }
    * { box-sizing: border-box; }
    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
    img { max-width: 100%; height: auto; }
    body { margin: 0; background: var(--page-bg); color: var(--ink); font-family: 'Gordita', sans-serif; }
    h1, h2, h3, .display { font-family: 'Renogare', sans-serif; font-weight: 400; margin: 0; }
    p { margin: 0; }
    a { color: var(--ink); text-decoration: none; }
    main p a:not([class*="btn"]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    a:hover { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 5px; }
    .container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
    .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: var(--navy); font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 16px; padding: 16px 32px; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; }
    .btn-primary:hover, .btn-secondary:hover, .btn-on-navy:hover, .logo-link:hover { text-decoration: none; }
    .btn-primary:hover, .btn-on-navy:hover { background: var(--green-dark); color: var(--navy); }
    .btn-secondary { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); font-family: 'Gordita', sans-serif; font-weight: 500; font-size: 16px; padding: 14.5px 31px; border-radius: 10px; border: 1.5px solid var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; }
    .btn-secondary:hover { background: var(--surface); color: var(--ink); }
    .btn-on-navy { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: var(--navy); font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 16px; padding: 16px 32px; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; }
    .tag { font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
    .eyebrow { font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
    .section { padding: 64px 0; }
    .section-title { font-size: 40px; line-height: 1.15; }
    .body-l { font-size: 19px; line-height: 1.5; font-weight: 400; color: var(--ink); }
    .body-m { font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--ink); }
    .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .stack { display: flex; flex-direction: column; }
    .row { display: flex; flex-direction: row; align-items: center; }
    @media (max-width: 1100px) {
      .hero-split-text .stack { max-width: 420px !important; }
    }
    @media (max-width: 860px) {
      .container { padding: 0 20px; }
      .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 20px; }
      .section { padding: 40px 0; }
      .section-tight { padding: 24px 0; }
      .display { font-size: 28px !important; line-height: 1.22 !important; }
      .section-title { font-size: 26px !important; }
      header.row { flex-wrap: wrap; padding: 12px 16px; gap: 8px; }
      header.row .logo-link img { height: 26px !important; }
      header.row .logo-link { margin-right: auto; }
      header.row nav.row { display: none; order: 4; width: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding-top: 8px; border-top: 1px solid var(--border); }
      header.row .theme-switch { display: none; order: 5; }
      header.row.menu-open nav.row { display: flex; }
      header.row.menu-open { max-height: 100vh; overflow-y: auto; }
      header.row.menu-open .theme-switch { display: inline-flex; margin-top: 12px; }
      header.row > .btn-primary { padding: 0 12px; font-size: 13px; width: auto; }
      .menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--ink); font-family: 'Gordita', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; }
      .hero-split { display: flex; flex-direction: column; min-height: 0; }
      .section.hero-split { padding-top: 22px; padding-bottom: 0; }
      .hero-split-text { order: 1; padding-bottom: 24px; }
      .hero-mesh-panel { position: static; order: 2; width: 100%; max-width: none; height: 170px; background-position: right center; }
      .hero-split.hero-left .hero-mesh-panel { background-position: left center; }
      .hero-split.hero-left .hero-split-text .stack { margin-left: 0; }
      .section.hero-split.hero-left { align-items: stretch; padding-bottom: 0; }
      .btn-primary, .btn-secondary, .btn-on-navy { white-space: normal; text-align: center; max-width: 100%; }
      .hero-split-text .row { flex-wrap: wrap; }
      .diagram { max-width: 320px; }
      .stepper { grid-template-columns: 1fr; gap: 20px; }
      .hero-figure .grid-2 { grid-template-columns: 1fr; }
      .celula-figure { max-width: 100%; margin: 8px auto 0; }
      .sys-figure { max-width: 100%; }
      .sys-figure .sys-label { font-size: 38px; }
      .grid-2.sys-grid { grid-template-columns: 1fr; }
      .socias-figure { width: 100%; }
      .sys-text { display: contents; }
      .sys-text > .btn-secondary { order: 3; }
      .celula-figure .cel-label { font-size: 25px; }
      .celula-figure .cel-center { font-size: 19px; }
      .grid-2[style*="padding-top"] > div, .grid-2 > .stack[style*="padding-top:34px"] { padding-top: 0 !important; }
      .stepper::before { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; }
      .stepper-item { flex-direction: row; gap: 16px; }
      .stepper-item .stepper-num { flex-shrink: 0; }
    }
    @media (max-width: 520px) {
      .display { font-size: 24px !important; }
      .btn-primary, .btn-secondary, .btn-on-navy { width: 100%; }
      header.row > .btn-primary { width: auto; }
    }