:root {
        color-scheme: light;
        --paper: #f7f7f4;
        --surface: #ffffff;
        --ink: #11110f;
        --muted: #686863;
        --line: #d9d9d2;
        --soft: #ecece6;
        --accent: #2457ff;
        --accent-ink: #ffffff;
        --shadow: 0 24px 70px rgba(21, 21, 18, 0.09);
        --radius: 1.15rem;
        --page: min(100% - 1.5rem, 82rem);
        --img-blanc-hero: url("/assets/images/blanc-hero.webp");
        --img-blanc-ritual: url("/assets/images/blanc-ritual.webp");
        --img-blanc-textures: url("/assets/images/blanc-textures.webp");
        --img-blanc-treatment: url("/assets/images/blanc-treatment.webp");
        --img-method: url("/assets/images/method.webp");
        --img-marina: url("/assets/images/marina.webp");
        --img-habitat-hero: url("/assets/images/habitat-hero.webp");
        --img-habitat-living: url("/assets/images/habitat-living.webp");
        --img-habitat-patio: url("/assets/images/habitat-patio.webp");
        --img-habitat-suite: url("/assets/images/habitat-suite.webp");
        --img-elan-one: url("/assets/images/elan-one.webp");
        --img-elan-two: url("/assets/images/elan-two.webp");
        --img-elan-three: url("/assets/images/elan-three.webp");
        --img-archive: url("/assets/images/archive.webp");
        --img-aura: url("/assets/images/aura.webp");
        --img-bruma-hero: url("/assets/images/bruma-hero.webp");
        --img-bruma-suite: url("/assets/images/bruma-suite.webp");
      }

      html[data-theme='dark'] {
        color-scheme: dark;
        --paper: #10100f;
        --surface: #181817;
        --ink: #f2f2ed;
        --muted: #a6a69f;
        --line: #343430;
        --soft: #22221f;
        --accent: #92abff;
        --accent-ink: #10100f;
        --shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        background: var(--paper);
      }

      body {
        margin: 0;
        min-width: 18rem;
        background: var(--paper);
        color: var(--ink);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 1rem;
        line-height: 1.5;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
      }

      button,
      a {
        -webkit-tap-highlight-color: transparent;
      }

      button {
        color: inherit;
        font: inherit;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .skip-link {
        position: fixed;
        inset: 0 auto auto 0;
        z-index: 100;
        padding: 0.75rem 1rem;
        background: var(--ink);
        color: var(--paper);
        transform: translateY(-120%);
      }

      .skip-link:focus {
        transform: translateY(0);
      }

      :focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 4px;
      }

      .shell {
        width: var(--page);
        margin-inline: auto;
      }

      .topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        padding-top: env(safe-area-inset-top);
        background: color-mix(in srgb, var(--paper) 88%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
      }

      .topbar-inner {
        min-height: 4.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .wordmark {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        font-size: 0.92rem;
        font-weight: 780;
        letter-spacing: -0.03em;
      }

      .wordmark-mark {
        display: grid;
        place-items: center;
        width: 2.05rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--ink);
        color: var(--paper);
        font-size: 0.78rem;
      }

      .topbar-note {
        display: none;
        color: var(--muted);
        font-size: 0.76rem;
      }

      .theme-toggle {
        min-width: 3rem;
        min-height: 3rem;
        display: inline-grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        cursor: pointer;
      }

      .theme-toggle span {
        width: 1.15rem;
        height: 1.15rem;
        display: block;
        border: 2px solid currentColor;
        border-radius: 50%;
        box-shadow: -0.38rem -0.38rem 0 -0.25rem var(--surface);
      }

      .hero {
        padding-block: clamp(4.8rem, 16vw, 9rem) clamp(3.5rem, 10vw, 7rem);
      }

      .kicker {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        margin: 0 0 1.2rem;
        color: var(--muted);
        font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .kicker::before {
        width: 1.5rem;
        height: 1px;
        background: currentColor;
        content: "";
      }

      h1,
      h2,
      h3,
      p {
        margin-top: 0;
      }

      .hero h1 {
        max-width: 15ch;
        margin-bottom: 1.5rem;
        font-size: clamp(3.35rem, 16vw, 8.8rem);
        font-weight: 520;
        letter-spacing: -0.075em;
        line-height: 0.86;
      }

      .hero h1 em {
        color: var(--muted);
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 400;
      }

      .hero-bottom {
        display: grid;
        gap: 1.5rem;
      }

      .hero-copy {
        max-width: 38rem;
        margin: 0;
        color: var(--muted);
        font-size: clamp(1rem, 2.6vw, 1.25rem);
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
      }

      .button {
        min-height: 3.2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        padding: 0.85rem 1.15rem;
        border: 1px solid var(--ink);
        border-radius: 999px;
        font-size: 0.84rem;
        font-weight: 700;
      }

      .button.primary {
        background: var(--ink);
        color: var(--paper);
      }

      .button.secondary {
        border-color: var(--line);
        background: var(--surface);
      }

      .privacy-strip {
        margin-bottom: clamp(4rem, 12vw, 8rem);
        padding: 1rem;
        display: grid;
        gap: 0.75rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
      }

      .privacy-strip strong {
        font-size: 0.84rem;
      }

      .privacy-strip p {
        margin: 0;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .privacy-dot {
        width: 0.55rem;
        aspect-ratio: 1;
        display: inline-block;
        margin-right: 0.45rem;
        border-radius: 50%;
        background: #32b56a;
        box-shadow: 0 0 0 0.3rem color-mix(in srgb, #32b56a 18%, transparent);
      }

      .section-heading {
        display: grid;
        gap: 1rem;
        margin-bottom: 1.8rem;
      }

      .section-heading h2 {
        max-width: 16ch;
        margin-bottom: 0;
        font-size: clamp(2.35rem, 9vw, 5rem);
        font-weight: 550;
        letter-spacing: -0.065em;
        line-height: 0.94;
      }

      .section-heading > p {
        max-width: 32rem;
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
      }

      #catalogo {
        scroll-margin-top: 5.5rem;
      }

      .catalog-rail {
        --catalog-card-width: min(82vw, 23rem);
        --catalog-edge: max(0rem, calc((100% - var(--catalog-card-width)) / 2));
        width: 100%;
        display: grid;
        grid-auto-columns: var(--catalog-card-width);
        grid-auto-flow: column;
        gap: 0.85rem;
        margin-inline: 0;
        padding: 0 var(--catalog-edge) 1.5rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: var(--catalog-edge);
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        cursor: grab;
      }

      .catalog-rail::-webkit-scrollbar {
        display: none;
      }

      .catalog-rail:active {
        cursor: grabbing;
      }

      .catalog-rail:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 0.4rem;
      }

      .concept-card {
        height: 35rem;
        min-height: 0;
        display: flex;
        flex-direction: column;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
      }

      .concept-visual {
        min-height: 0;
        flex: 0 0 17.5rem;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: var(--soft);
      }

      .concept-visual::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
      }

      .visual-editorial {
        padding: 1.2rem;
        display: flex;
        align-items: flex-end;
        background:
          linear-gradient(180deg, transparent 42%, rgba(35, 22, 18, 0.66)),
          var(--img-blanc-hero) center 28% / cover no-repeat;
        color: white;
      }

      .visual-editorial::before {
        display: none;
      }

      .visual-editorial span {
        z-index: 1;
        font-family: Georgia, serif;
        font-size: 2rem;
        font-style: italic;
        text-shadow: 0 0.15rem 1rem rgba(0, 0, 0, 0.35);
      }

      .visual-system {
        display: flex;
        align-items: flex-end;
        padding: 1rem;
        background:
          linear-gradient(180deg, transparent 42%, rgba(10, 12, 8, 0.62)),
          var(--img-method) center 48% / cover no-repeat;
        color: #11130e;
      }

      .visual-system::before {
        display: none;
      }

      .visual-system span {
        z-index: 1;
        max-width: 15rem;
        padding: 0.9rem 1rem;
        border: 1px solid #11130e;
        background: rgba(232, 255, 104, 0.94);
        font-family: ui-monospace, monospace;
        font-size: 1.1rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .visual-marea {
        display: flex;
        align-items: flex-end;
        padding: 1.2rem;
        background:
          linear-gradient(180deg, transparent 42%, rgba(43, 25, 18, 0.64)),
          var(--img-marina) center 48% / cover no-repeat;
        color: #fff4d8;
      }

      .visual-marea::after {
        display: none;
      }

      .visual-marea span {
        z-index: 1;
        max-width: 8ch;
        font-family: Georgia, serif;
        font-size: 2.8rem;
        font-style: italic;
        line-height: 0.8;
      }

      .visual-house {
        display: grid;
        place-items: end start;
        padding: 1.2rem;
        background:
          linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.64)),
          var(--img-habitat-hero) center / cover no-repeat;
        color: white;
      }

      .visual-house::before {
        display: none;
      }

      .visual-house span {
        z-index: 1;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.12em;
      }

      .visual-fashion {
        background:
          linear-gradient(180deg, transparent 45%, rgba(15, 11, 17, 0.62)),
          var(--img-elan-one) center 28% / cover no-repeat;
        color: white;
      }

      .visual-fashion::after {
        display: none;
      }

      .visual-fashion span {
        position: absolute;
        left: 1rem;
        bottom: 1rem;
        z-index: 1;
        writing-mode: vertical-rl;
        font-size: 2.3rem;
        font-weight: 800;
        letter-spacing: -0.08em;
      }

      .visual-archive {
        padding: 1.2rem;
        display: flex;
        align-items: flex-end;
        background:
          linear-gradient(180deg, transparent 45%, rgba(79, 70, 130, 0.24)),
          var(--img-archive) center / cover no-repeat;
        color: #171a29;
      }

      .visual-archive::before {
        display: none;
      }

      .visual-archive span {
        z-index: 1;
        padding: 0.55rem 0.75rem;
        border: 1px solid rgba(74, 80, 129, 0.2);
        border-radius: 0.65rem;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 0.6rem 1.6rem rgba(62, 67, 106, 0.16);
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }

      .concept-copy {
        flex: 1;
        padding: 1.15rem;
        display: flex;
        flex-direction: column;
      }

      .concept-meta {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
        color: var(--muted);
        font-family: ui-monospace, monospace;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .concept-copy h3 {
        margin-bottom: 0.55rem;
        font-size: 1.55rem;
        letter-spacing: -0.045em;
      }

      .concept-copy p {
        margin-bottom: 1.3rem;
        color: var(--muted);
        font-size: 0.84rem;
      }

      .concept-open {
        width: 100%;
        min-height: 3rem;
        margin-top: auto;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: transparent;
        cursor: pointer;
        font-weight: 700;
      }

      .catalog-toolbar {
        min-height: 3rem;
        margin: -0.55rem 0 0.9rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .catalog-status {
        margin: 0;
        color: var(--muted);
        font-family: ui-monospace, monospace;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .catalog-arrows {
        display: flex;
        gap: 0.45rem;
      }

      .catalog-arrow {
        width: 3rem;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface);
        color: var(--ink);
        cursor: pointer;
        font-size: 1.15rem;
        transition: transform 180ms ease, background 180ms ease, color 180ms ease, opacity 180ms ease;
      }

      .catalog-arrow:hover:not(:disabled) {
        background: var(--ink);
        color: var(--paper);
        transform: translateY(-0.12rem);
      }

      .catalog-arrow:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 0.18rem;
      }

      .catalog-arrow:disabled {
        cursor: default;
        opacity: 0.28;
      }

      .catalog-hint {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin: 0.65rem 0 7rem;
        color: var(--muted);
        font-family: ui-monospace, monospace;
        font-size: 0.66rem;
        text-transform: uppercase;
      }

      .footer {
        padding-block: 2rem max(2rem, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 0.75rem;
      }

      @media (min-width: 44rem) {
        :root {
          --page: min(100% - 3rem, 82rem);
        }

        .topbar-note {
          display: block;
        }

        .hero-bottom,
        .section-heading {
          grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.55fr);
          align-items: end;
        }

        .privacy-strip {
          grid-template-columns: auto 1fr;
          align-items: center;
        }

        .catalog-rail {
          --catalog-card-width: min(42vw, 24rem);
          --catalog-edge: 0rem;
          grid-template-columns: none;
          grid-auto-columns: var(--catalog-card-width);
          grid-auto-flow: column;
          gap: 1rem;
          margin: 0;
          padding: 0 0 1.25rem;
          overflow-x: auto;
        }

        .concept-card {
          height: 34rem;
          grid-column: auto;
        }

        .concept-visual {
          flex-basis: 20rem;
        }
      }

      @media (min-width: 70rem) {
        .catalog-rail {
          --catalog-card-width: 24rem;
        }

        .concept-card {
          height: 36rem;
        }

        .concept-visual {
          flex-basis: 22rem;
        }
      }

      /* --- 11 · Cobalto 57: hotel de bahía tropical-modernista --- */
      .visual-cobalto {
        padding: 1.2rem;
        display: flex;
        align-items: flex-end;
        isolation: isolate;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgba(7, 23, 48, 0.05) 34%, rgba(7, 23, 48, 0.72)),
          var(--img-cobalto-hero) center 56% / cover no-repeat,
          #1557ff;
        color: #fff;
      }

      .visual-cobalto::before {
        display: block;
        inset: -35% auto auto -12%;
        width: 13rem;
        aspect-ratio: 1;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 50%;
        background: rgba(255, 104, 75, 0.78);
        content: "";
        animation: cobalto-sun-float 12s ease-in-out infinite;
      }

      .visual-cobalto > span {
        position: relative;
        z-index: 1;
        font-size: 0.7rem;
        font-weight: 780;
        letter-spacing: 0.12em;
        text-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.65);
        text-transform: uppercase;
      }

      .demo-cobalto {
        --cobalto-paper: #f6f2e8;
        --cobalto-surface: #fffdf7;
        --cobalto-ink: #10213a;
        --cobalto-muted: #5f6b76;
        --cobalto-line: #c8c7be;
        --cobalto-blue: #1557ff;
        --cobalto-blue-deep: #0c347d;
        --cobalto-coral: #ff684b;
        --cobalto-aqua: #dceff1;
        min-height: 100svh;
        overflow: hidden;
        overflow: clip;
        background: var(--cobalto-paper);
        color: var(--cobalto-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-cobalto {
        --cobalto-paper: #091426;
        --cobalto-surface: #10213a;
        --cobalto-ink: #f4f0e6;
        --cobalto-muted: #b2bdc8;
        --cobalto-line: #3b4a5e;
        --cobalto-blue: #7ea4ff;
        --cobalto-blue-deep: #071b3f;
        --cobalto-coral: #ff8069;
        --cobalto-aqua: #16384b;
      }

      .cobalto-nav {
        min-height: 5rem;
        padding: 0.75rem 7.25rem 0.75rem max(1rem, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 1rem;
        border-bottom: 1px solid var(--cobalto-line);
        background: color-mix(in srgb, var(--cobalto-paper) 94%, transparent);
      }

      .cobalto-brand {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        color: inherit;
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .cobalto-brand-mark {
        width: 1.75rem;
        aspect-ratio: 1;
        position: relative;
        display: inline-block;
        overflow: hidden;
        border-radius: 50%;
        background: var(--cobalto-blue);
      }

      .cobalto-brand-mark::after {
        width: 58%;
        height: 150%;
        position: absolute;
        inset: -25% auto auto 58%;
        border-radius: 50%;
        background: var(--cobalto-coral);
        content: "";
        transform: rotate(24deg);
      }

      .cobalto-nav .demo-inline-nav,
      .cobalto-nav-cta {
        display: none;
      }

      .cobalto-nav .demo-inline-nav button {
        padding-inline: 0.8rem;
        border: 0;
        background: transparent;
        color: var(--cobalto-muted);
        cursor: pointer;
        font-size: 0.7rem;
      }

      .cobalto-nav .demo-inline-nav button:hover {
        color: var(--cobalto-ink);
      }

      .cobalto-nav-cta {
        min-height: 2.8rem;
        padding-inline: 1rem;
        border: 1px solid var(--cobalto-ink);
        border-radius: 999px;
        background: var(--cobalto-ink);
        color: var(--cobalto-paper);
        cursor: pointer;
        font-size: 0.68rem;
        font-weight: 760;
      }

      .cobalto-hero {
        width: min(100% - 1rem, 90rem);
        margin-inline: auto;
        padding: clamp(2.8rem, 8vw, 6rem) 0.25rem 1rem;
        position: relative;
        display: grid;
        gap: 2rem;
        isolation: isolate;
      }

      .cobalto-hero::before {
        width: clamp(22rem, 80vw, 64rem);
        aspect-ratio: 1;
        position: absolute;
        inset: -18rem auto auto -24rem;
        z-index: -1;
        border-radius: 50%;
        background:
          radial-gradient(circle at 58% 44%, color-mix(in srgb, var(--cobalto-coral) 28%, transparent), transparent 42%),
          radial-gradient(circle at 35% 64%, color-mix(in srgb, var(--cobalto-blue) 20%, transparent), transparent 54%);
        content: "";
        filter: blur(0.25rem);
        animation: cobalto-ambient-drift 18s ease-in-out infinite;
      }

      .cobalto-hero-copy {
        max-width: 45rem;
        position: relative;
        z-index: 1;
      }

      .demo-cobalto .demo-label {
        color: var(--cobalto-blue);
        font-weight: 760;
      }

      .cobalto-hero h2 {
        max-width: 9ch;
        margin: 1rem 0 1.25rem;
        font-size: clamp(3.35rem, 15vw, 7.6rem);
        font-weight: 760;
        letter-spacing: -0.075em;
        line-height: 0.88;
      }

      .cobalto-hero h2 em {
        display: block;
        color: var(--cobalto-blue);
        font-style: normal;
      }

      .cobalto-hero-copy > p:not(.demo-label) {
        max-width: 38rem;
        margin: 0;
        color: var(--cobalto-muted);
        font-size: clamp(1rem, 2.7vw, 1.22rem);
        line-height: 1.62;
      }

      .cobalto-actions {
        margin-top: 1.7rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
      }

      .demo-cobalto .cobalto-primary,
      .demo-cobalto .cobalto-secondary {
        min-height: 3.25rem;
        padding: 0.8rem 1.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--cobalto-blue);
        border-radius: 999px;
        cursor: pointer;
        font-size: 0.78rem;
        font-weight: 780;
        transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
      }

      .demo-cobalto .cobalto-primary {
        background: var(--cobalto-blue);
        color: #fff;
      }

      .demo-cobalto .cobalto-secondary {
        background: transparent;
        color: var(--cobalto-blue);
      }

      .demo-cobalto .cobalto-primary:hover,
      .demo-cobalto .cobalto-secondary:hover {
        transform: translateY(-0.12rem);
      }

      .cobalto-hero-visual {
        width: 100%;
        min-width: 0;
        aspect-ratio: 16 / 11;
        min-height: 17rem;
        position: relative;
        overflow: hidden;
        border-radius: 1.7rem 1.7rem 0.35rem 1.7rem;
        background:
          linear-gradient(180deg, rgba(6, 28, 59, 0.02) 50%, rgba(6, 28, 59, 0.58)),
          var(--img-cobalto-hero) 52% center / cover no-repeat,
          var(--cobalto-blue-deep);
        box-shadow: 0 1.8rem 4rem rgba(16, 33, 58, 0.16);
      }

      .cobalto-hero-visual::after,
      .cobalto-pool-image::after {
        width: 54%;
        height: 180%;
        position: absolute;
        inset: -46% auto auto -74%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        content: "";
        transform: rotate(18deg);
        animation: cobalto-water-sweep 9s ease-in-out infinite;
      }

      .cobalto-sun {
        width: clamp(4.6rem, 16vw, 8rem);
        aspect-ratio: 1;
        position: absolute;
        inset: 1rem 1rem auto auto;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        background: color-mix(in srgb, var(--cobalto-coral) 92%, transparent);
        box-shadow: 0 0 2rem rgba(255, 104, 75, 0.28);
        animation: cobalto-sun-float 12s ease-in-out infinite;
      }

      .cobalto-hero-caption {
        min-width: 0;
        position: absolute;
        inset: auto 1rem 1rem;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        color: #fff;
        font-size: 0.65rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
      }

      .cobalto-hero-caption > * {
        min-width: 0;
      }

      .cobalto-hero-caption strong {
        max-width: 16ch;
        font-size: 0.74rem;
      }

      .cobalto-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-block: 1px solid var(--cobalto-line);
      }

      .cobalto-facts div {
        min-height: 5.6rem;
        padding: 1rem 0.75rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.65rem;
        border-bottom: 1px solid var(--cobalto-line);
      }

      .cobalto-facts div:nth-child(odd) {
        border-right: 1px solid var(--cobalto-line);
      }

      .cobalto-facts div:nth-last-child(-n + 2) {
        border-bottom: 0;
      }

      .cobalto-facts strong {
        font-size: 1rem;
      }

      .cobalto-facts span {
        color: var(--cobalto-muted);
        font-size: 0.66rem;
        text-transform: uppercase;
      }

      .cobalto-story,
      .cobalto-pool,
      .cobalto-dining,
      .cobalto-location,
      .cobalto-close,
      .cobalto-footer {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
      }

      .cobalto-story {
        padding-block: clamp(6rem, 14vw, 10rem);
        display: grid;
        gap: 2.5rem;
      }

      .cobalto-story h3,
      .cobalto-rooms h3,
      .cobalto-pool h3,
      .cobalto-dining h3,
      .cobalto-location h3,
      .cobalto-close h3 {
        max-width: 13ch;
        margin: 0.8rem 0 1.2rem;
        font-size: clamp(2.7rem, 9vw, 6.3rem);
        font-weight: 680;
        letter-spacing: -0.065em;
        line-height: 0.92;
      }

      .cobalto-story-copy > p:not(.demo-label),
      .cobalto-pool-copy > p:not(.demo-label),
      .cobalto-dining-copy > p:not(.demo-label),
      .cobalto-location-copy > p:not(.demo-label) {
        max-width: 38rem;
        color: var(--cobalto-muted);
        font-size: 1rem;
        line-height: 1.68;
      }

      .cobalto-story-note {
        min-height: 22rem;
        padding: 1.35rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 0.4rem 5rem 0.4rem 0.4rem;
        background: var(--cobalto-coral);
        color: #10213a;
      }

      .cobalto-story-note > strong {
        font-size: clamp(6rem, 28vw, 12rem);
        letter-spacing: -0.1em;
        line-height: 0.75;
      }

      .cobalto-story-note div {
        display: grid;
        gap: 0.5rem;
      }

      .cobalto-story-note span {
        font-size: 0.68rem;
        font-weight: 760;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .cobalto-story-note p {
        max-width: 26rem;
        margin: 0;
        line-height: 1.5;
      }

      .cobalto-rooms {
        padding-block: clamp(5rem, 11vw, 8rem);
        background: var(--cobalto-blue-deep);
        color: #fff;
      }

      .cobalto-rooms-inner {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
      }

      .cobalto-rooms-header {
        margin-bottom: 2.5rem;
        display: grid;
        gap: 1rem;
      }

      .cobalto-rooms .demo-label {
        color: #9fbbff;
      }

      .cobalto-rooms h3 {
        color: #fff;
      }

      .cobalto-rooms-header > p:last-child {
        max-width: 34rem;
        margin: 0;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.6;
      }

      .cobalto-room-rail.carousel-track {
        --carousel-size: 88%;
        gap: 1rem;
        padding-block: 0.2rem;
      }

      .cobalto-room-card {
        min-height: 31rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 1.3rem;
        background: #f8f3e8;
        color: #10213a;
      }

      .cobalto-room-image {
        aspect-ratio: 16 / 11;
        min-height: 15.5rem;
        position: relative;
        overflow: hidden;
        background-color: #dceff1;
        background-position: center;
        background-size: cover;
      }

      .cobalto-room-image::after {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 65%, rgba(8, 28, 58, 0.35));
        content: "";
      }

      .cobalto-room-one { background-image: var(--img-cobalto-suite); }
      .cobalto-room-two { background-image: var(--img-cobalto-hero); background-position: 58% 56%; }
      .cobalto-room-three { background-image: var(--img-cobalto-pool); background-position: 62% center; }

      .cobalto-room-copy {
        padding: 1.2rem;
      }

      .cobalto-room-copy > span {
        color: #5d6875;
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .cobalto-room-copy h4 {
        margin: 0.65rem 0 0.75rem;
        font-size: clamp(1.8rem, 6vw, 2.8rem);
        letter-spacing: -0.05em;
      }

      .cobalto-room-copy p {
        min-height: 4.6em;
        margin: 0;
        color: #5d6875;
        line-height: 1.5;
      }

      .cobalto-room-copy button {
        min-height: 2.8rem;
        margin-top: 1rem;
        padding: 0.7rem 0;
        border: 0;
        border-bottom: 1px solid #10213a;
        background: transparent;
        color: #10213a;
        cursor: pointer;
        font-size: 0.72rem;
        font-weight: 780;
      }

      .cobalto-rooms .carousel-ui {
        color: #fff;
      }

      .cobalto-pool {
        padding-block: clamp(6rem, 13vw, 10rem);
        display: grid;
        gap: 2.5rem;
        align-items: center;
      }

      .cobalto-pool-image,
      .cobalto-dining-image {
        width: 100%;
        min-width: 0;
        aspect-ratio: 4 / 3;
        min-height: 19rem;
        position: relative;
        overflow: hidden;
        border-radius: 0.5rem;
        background-position: center;
        background-size: cover;
      }

      .cobalto-pool-image {
        background-image: var(--img-cobalto-pool);
      }

      .cobalto-pool-image > span,
      .cobalto-dining-image > span {
        position: absolute;
        inset: auto 1rem 1rem;
        z-index: 1;
        color: #fff;
        font-size: 0.65rem;
        font-weight: 760;
        letter-spacing: 0.1em;
        text-shadow: 0 0.15rem 1rem rgba(0, 0, 0, 0.7);
        text-transform: uppercase;
      }

      .cobalto-day {
        margin-top: 2rem;
        display: grid;
        border-top: 1px solid var(--cobalto-line);
      }

      .cobalto-day li {
        padding-block: 1rem;
        display: grid;
        grid-template-columns: 4rem 1fr;
        gap: 0.8rem;
        border-bottom: 1px solid var(--cobalto-line);
        list-style: none;
      }

      .cobalto-day time {
        color: var(--cobalto-blue);
        font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
        font-size: 0.72rem;
      }

      .cobalto-day strong {
        font-size: 0.9rem;
      }

      .cobalto-dining {
        padding-block: clamp(5rem, 12vw, 9rem);
        display: grid;
        gap: 2.5rem;
        align-items: center;
        border-top: 1px solid var(--cobalto-line);
      }

      .cobalto-dining-image {
        background:
          linear-gradient(180deg, transparent 60%, rgba(5, 20, 42, 0.55)),
          var(--img-cobalto-dining) center / cover no-repeat;
      }

      .cobalto-dining-secondary {
        margin-top: 2rem;
        padding: 1.2rem 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        border-block: 1px solid var(--cobalto-line);
      }

      .cobalto-dining-secondary strong {
        display: block;
        margin-bottom: 0.35rem;
      }

      .cobalto-dining-secondary span {
        color: var(--cobalto-muted);
        font-size: 0.75rem;
      }

      .cobalto-dining-secondary b {
        color: var(--cobalto-coral);
        font-size: 2rem;
        font-weight: 500;
      }

      .cobalto-location {
        padding-block: clamp(5rem, 12vw, 9rem);
        display: grid;
        gap: 2.5rem;
        align-items: center;
        border-top: 1px solid var(--cobalto-line);
      }

      .cobalto-map {
        aspect-ratio: 1 / 1;
        min-height: 20rem;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--cobalto-line);
        border-radius: 50% 50% 0.7rem 0.7rem;
        background:
          linear-gradient(32deg, transparent 48%, color-mix(in srgb, var(--cobalto-ink) 20%, transparent) 49%, transparent 50%) 0 0 / 5.4rem 5.4rem,
          linear-gradient(-26deg, transparent 48%, color-mix(in srgb, var(--cobalto-ink) 14%, transparent) 49%, transparent 50%) 0 0 / 7.2rem 7.2rem,
          var(--cobalto-aqua);
      }

      .cobalto-map::before {
        width: 115%;
        height: 70%;
        position: absolute;
        inset: auto -18% -32% auto;
        border: 1.4rem solid color-mix(in srgb, var(--cobalto-blue) 65%, transparent);
        border-radius: 50% 50% 0 0;
        background: var(--cobalto-blue-deep);
        content: "";
        transform: rotate(-8deg);
      }

      .cobalto-map-point {
        position: absolute;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--cobalto-ink);
        font-size: 0.62rem;
        font-weight: 760;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .cobalto-map-point::before {
        width: 0.75rem;
        aspect-ratio: 1;
        border: 0.22rem solid var(--cobalto-surface);
        border-radius: 50%;
        background: var(--cobalto-coral);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--cobalto-coral) 52%, transparent);
        content: "";
        animation: cobalto-map-pulse 2.8s ease-out infinite;
      }

      .cobalto-map-point-one { inset: 24% auto auto 16%; }
      .cobalto-map-point-two { inset: 46% 10% auto auto; }
      .cobalto-map-point-three { inset: auto auto 22% 24%; color: #fff; }
      .cobalto-map-point-two::before { animation-delay: 0.9s; }
      .cobalto-map-point-three::before { animation-delay: 1.8s; }

      .cobalto-location-list {
        margin-top: 2rem;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        list-style: none;
      }

      .cobalto-location-list li {
        padding: 0.65rem 0.85rem;
        border: 1px solid var(--cobalto-line);
        border-radius: 999px;
        color: var(--cobalto-muted);
        font-size: 0.7rem;
      }

      .cobalto-close {
        margin-block: clamp(4rem, 10vw, 8rem) 2rem;
        padding: clamp(2rem, 7vw, 5rem);
        position: relative;
        overflow: hidden;
        border-radius: 0.6rem 5rem 0.6rem 0.6rem;
        background: var(--cobalto-blue);
        color: #fff;
      }

      .cobalto-close::after {
        width: clamp(10rem, 32vw, 24rem);
        aspect-ratio: 1;
        position: absolute;
        inset: auto -7% -48% auto;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 50%;
        background: var(--cobalto-coral);
        content: "";
      }

      .cobalto-close > * {
        position: relative;
        z-index: 1;
      }

      .cobalto-close .demo-label {
        color: rgba(255, 255, 255, 0.78);
      }

      .cobalto-close h3 {
        max-width: 12ch;
        color: #fff;
      }

      .cobalto-close p:not(.demo-label) {
        max-width: 37rem;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.6;
      }

      .cobalto-close .demo-cta {
        margin-top: 1rem;
        border-color: #fff;
        background: #fff;
        color: #10213a;
      }

      .cobalto-footer {
        padding: 2rem 0 max(2rem, env(safe-area-inset-bottom));
        display: grid;
        gap: 0.85rem;
        border-top: 1px solid var(--cobalto-line);
        color: var(--cobalto-muted);
        font-size: 0.68rem;
        line-height: 1.5;
      }

      .cobalto-footer strong {
        color: var(--cobalto-ink);
        letter-spacing: 0.14em;
      }

      .cobalto-footer small {
        max-width: 54rem;
        font-size: inherit;
      }

      #cobalto-rooms,
      #cobalto-pool,
      #cobalto-table,
      #cobalto-acapulco {
        scroll-margin-top: 1rem;
      }

      html.motion-managed .cobalto-hero:not(.is-motion-active)::before,
      html.motion-managed .cobalto-hero:not(.is-motion-active) .cobalto-sun,
      html.motion-managed .cobalto-hero:not(.is-motion-active) .cobalto-hero-visual::after,
      html.motion-managed .cobalto-pool:not(.is-motion-active) .cobalto-pool-image::after {
        animation-play-state: paused;
      }

      @keyframes cobalto-ambient-drift {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(3.5rem, 2rem, 0) scale(1.08); }
      }

      @keyframes cobalto-sun-float {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(-0.75rem, 0.6rem, 0); }
      }

      @keyframes cobalto-water-sweep {
        0%, 18% { transform: translateX(0) rotate(18deg); opacity: 0; }
        34% { opacity: 0.72; }
        68%, 100% { transform: translateX(360%) rotate(18deg); opacity: 0; }
      }

      @keyframes cobalto-map-pulse {
        0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cobalto-coral) 55%, transparent); }
        80%, 100% { box-shadow: 0 0 0 1.25rem transparent; }
      }

      @media (min-width: 48rem) {
        .cobalto-nav {
          padding-inline: max(1.5rem, env(safe-area-inset-left)) 12rem;
          grid-template-columns: auto minmax(0, 1fr) auto;
        }

        .cobalto-nav .demo-inline-nav,
        .cobalto-nav-cta {
          display: flex;
        }

        .cobalto-nav .demo-inline-nav {
          justify-content: center;
        }

        .cobalto-hero {
          min-height: calc(100svh - 5rem);
          padding: clamp(3.5rem, 7vw, 6.5rem) 0.5rem 1.5rem;
          grid-template-columns: minmax(18rem, 0.78fr) minmax(25rem, 1.22fr);
          grid-template-rows: minmax(36rem, 1fr) auto;
          align-items: center;
          column-gap: clamp(2rem, 5vw, 5.5rem);
        }

        .cobalto-hero-copy {
          grid-column: 1;
          grid-row: 1;
        }

        .cobalto-hero-visual {
          min-height: 38rem;
          align-self: stretch;
          grid-column: 2;
          grid-row: 1;
          aspect-ratio: auto;
        }

        .cobalto-facts {
          grid-column: 1 / -1;
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .cobalto-facts div,
        .cobalto-facts div:nth-child(odd) {
          border-right: 1px solid var(--cobalto-line);
          border-bottom: 0;
        }

        .cobalto-facts div:last-child {
          border-right: 0;
        }

        .cobalto-story {
          grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
          align-items: center;
          gap: clamp(3rem, 8vw, 8rem);
        }

        .cobalto-story-note {
          min-height: 31rem;
        }

        .cobalto-room-rail.carousel-track {
          --carousel-size: 47%;
          gap: 1.2rem;
        }

        .cobalto-room-card {
          min-height: 34rem;
        }

        .cobalto-rooms-header {
          grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
          align-items: end;
        }

        .cobalto-pool,
        .cobalto-dining,
        .cobalto-location {
          grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
          gap: clamp(3rem, 7vw, 7rem);
        }

        .cobalto-pool-image,
        .cobalto-dining-image {
          min-height: 38rem;
          aspect-ratio: auto;
        }

        .cobalto-dining-image {
          grid-column: 2;
        }

        .cobalto-dining-copy {
          grid-column: 1;
          grid-row: 1;
        }

        .cobalto-location {
          grid-template-columns: minmax(20rem, 0.9fr) minmax(0, 1.1fr);
        }

        .cobalto-footer {
          grid-template-columns: auto 1fr;
          align-items: start;
          column-gap: 2rem;
        }

        .cobalto-footer small {
          grid-column: 2;
        }
      }

      @media (min-width: 75rem) {
        .cobalto-room-rail.carousel-track {
          --carousel-size: 36%;
        }

        .cobalto-hero h2 {
          font-size: clamp(5.8rem, 7vw, 7.6rem);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }

      /* --- Prototipos internos: una arquitectura distinta por concepto --- */
      body.demo-active {
        overflow-x: hidden;
      }

      body.demo-active > .skip-link,
      body.demo-active > .topbar,
      body.demo-active > main,
      body.demo-active > .footer {
        display: none;
      }

      .demo-stage[hidden],
      .demo-view[hidden] {
        display: none !important;
      }

      .demo-stage {
        min-height: 100svh;
        background: var(--paper);
      }

      .demo-controls {
        position: fixed;
        inset: max(0.7rem, env(safe-area-inset-top)) 0.7rem auto;
        z-index: 90;
        display: flex;
        justify-content: flex-end;
        gap: 0.45rem;
        pointer-events: none;
      }

      .demo-controls button {
        min-width: 3rem;
        min-height: 3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        border: 1px solid color-mix(in srgb, var(--ink) 48%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 97%, transparent);
        box-shadow: 0 0.7rem 2.2rem rgba(0, 0, 0, 0.1);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        cursor: pointer;
        pointer-events: auto;
      }

      .demo-controls .demo-back {
        width: 3rem;
        padding: 0;
        font-size: 0;
        font-weight: 760;
      }

      .demo-controls .demo-back span {
        font-size: 1rem;
      }

      .demo-controls .demo-theme-toggle span {
        width: 1.05rem;
        height: 1.05rem;
        display: block;
        border: 2px solid currentColor;
        border-radius: 50%;
        box-shadow: -0.35rem -0.35rem 0 -0.23rem var(--surface);
      }

      .demo-label {
        margin: 0;
        font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
        font-size: 0.75rem;
        letter-spacing: 0.11em;
        text-transform: uppercase;
      }

      .demo-view h2[tabindex='-1']:focus {
        outline: none;
      }

      .demo-cta {
        min-height: 3.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        padding: 0.8rem 1.15rem;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-size: 0.82rem;
        font-weight: 760;
        transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
      }

      .demo-cta:hover {
        transform: translateY(-0.12rem);
      }

      .demo-cta:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 0.2rem;
      }

      .scene-art {
        position: relative;
        isolation: isolate;
        overflow: hidden;
      }

      .scene-art::before,
      .scene-art::after {
        position: absolute;
        content: "";
      }

      .carousel-shell {
        position: relative;
      }

      .carousel-track {
        --carousel-size: 88%;
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        touch-action: pan-x pan-y pinch-zoom;
      }

      .carousel-track::before,
      .carousel-track::after {
        flex: 0 0 max(0px, calc((100% - var(--carousel-size)) / 2 - 0.75rem));
        content: "";
      }

      .carousel-track::-webkit-scrollbar {
        display: none;
      }

      .carousel-slide {
        flex: 0 0 var(--carousel-size);
        scroll-snap-align: center;
      }

      .carousel-ui {
        margin-top: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
      }

      .carousel-arrows,
      .carousel-dots {
        display: flex;
        align-items: center;
        gap: 0.45rem;
      }

      .carousel-arrows button,
      .carousel-dots button {
        min-width: 2.8rem;
        min-height: 2.8rem;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: transparent;
        cursor: pointer;
      }

      .carousel-dots button {
        min-width: 2.75rem;
        min-height: 2.75rem;
        position: relative;
        padding: 0;
        border: 0;
        opacity: 1;
      }

      .carousel-dots button::before {
        width: 0.85rem;
        height: 0.85rem;
        position: absolute;
        inset: 50% auto auto 50%;
        border: 1px solid currentColor;
        border-radius: 50%;
        content: "";
        opacity: 0.32;
        transform: translate(-50%, -50%);
      }

      .carousel-dots button[aria-current='true']::before {
        background: currentColor;
        opacity: 1;
      }

      .carousel-status {
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

      /* 01 · Blanc Studio — revista serena, sin tarjetas de producto */
      .demo-blanc {
        --blanc-paper: #f6f3ed;
        --blanc-ink: #1a1917;
        --blanc-muted: #77736c;
        --blanc-line: #cfc9bf;
        min-height: 100svh;
        background: var(--blanc-paper);
        color: var(--blanc-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-blanc {
        --blanc-paper: #111210;
        --blanc-ink: #efeee8;
        --blanc-muted: #a5a29b;
        --blanc-line: #3a3b36;
      }

      .blanc-nav {
        min-height: 5.2rem;
        padding: 1rem max(1rem, env(safe-area-inset-left));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--blanc-line);
      }

      .blanc-brand {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.25rem;
        font-style: italic;
      }

      .blanc-nav small {
        display: none;
        color: var(--blanc-muted);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .blanc-hero {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
        padding-block: 2rem 4rem;
        display: grid;
        gap: 1.7rem;
      }

      .blanc-copy {
        align-self: end;
      }

      .blanc-copy .demo-label {
        margin-bottom: 1.3rem;
        color: var(--blanc-muted);
      }

      .blanc-copy h2 {
        max-width: 8ch;
        margin-bottom: 1.3rem;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(3.8rem, 17vw, 9rem);
        font-weight: 400;
        letter-spacing: -0.075em;
        line-height: 0.82;
      }

      .blanc-copy h2 em {
        display: block;
        max-width: calc(100% - 0.12em);
        translate: 0.12em 0;
        color: var(--blanc-muted);
        font-weight: 400;
      }

      .blanc-copy > p:not(.demo-label) {
        max-width: 30rem;
        margin-bottom: 1.5rem;
        color: var(--blanc-muted);
        font-size: 0.92rem;
      }

      .blanc-portrait {
        min-height: 31rem;
        border-radius: 48% 48% 0.4rem 0.4rem;
        background:
          linear-gradient(180deg, transparent 72%, rgba(75, 53, 44, 0.14)),
          var(--img-blanc-hero) center 28% / cover no-repeat;
        box-shadow: 0 2.2rem 5rem rgba(70, 48, 40, 0.14);
      }

      .blanc-portrait::before,
      .blanc-portrait::after {
        display: none;
      }

      .blanc-notes {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
        padding-block: 1rem 5rem;
        border-top: 1px solid var(--blanc-line);
      }

      .blanc-notes > header {
        margin-bottom: 1.5rem;
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
      }

      .blanc-notes h3 {
        margin: 0;
        font-family: Georgia, serif;
        font-size: clamp(2rem, 6vw, 2.3rem);
        font-weight: 400;
      }

      .blanc-notes .carousel-slide {
        min-height: 25rem;
      }

      .blanc-scene-one {
        background:
          linear-gradient(180deg, transparent 74%, rgba(61, 48, 39, 0.16)),
          var(--img-blanc-ritual) center / cover no-repeat;
      }

      .blanc-scene-two {
        background:
          linear-gradient(180deg, transparent 74%, rgba(61, 48, 39, 0.14)),
          var(--img-blanc-textures) center / cover no-repeat;
      }

      .blanc-scene-three {
        background:
          linear-gradient(180deg, transparent 74%, rgba(61, 48, 39, 0.16)),
          var(--img-blanc-treatment) center 38% / cover no-repeat;
      }

      .blanc-scene-one::before,
      .blanc-scene-two::after,
      .blanc-scene-three::before {
        display: none;
      }

      .blanc-service-list {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
        padding-bottom: 5rem;
      }

      .blanc-service-list article {
        padding-block: 1.2rem;
        display: grid;
        grid-template-columns: 2rem 1fr auto;
        gap: 0.8rem;
        border-top: 1px solid var(--blanc-line);
      }

      .blanc-service-list article span,
      .blanc-service-list article small {
        color: var(--blanc-muted);
        font-size: 0.7rem;
      }

      .blanc-service-list article strong {
        font-family: Georgia, serif;
        font-size: 1.2rem;
        font-weight: 400;
      }

      /* 02 · Método Uno — sistema modular, rail y panel interactivo */
      .demo-method {
        --method-bg: #dfff55;
        --method-card: #f7f4ea;
        --method-ink: #15170f;
        --method-line: #15170f;
        --method-lime: #a8c92d;
        min-height: 100svh;
        background: var(--method-bg);
        color: var(--method-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-method {
        --method-bg: #11170c;
        --method-card: #1b2215;
        --method-ink: #e3ff55;
        --method-line: #80983b;
      }

      .method-top {
        min-height: 4.8rem;
        padding: 0.8rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--method-line);
        font-family: ui-monospace, monospace;
        font-size: 0.7rem;
        text-transform: uppercase;
      }

      .method-top strong {
        font-size: 0.92rem;
      }

      .method-top span {
        display: none;
      }

      .method-layout {
        min-height: calc(100svh - 4.8rem);
      }

      .method-rail {
        display: none;
      }

      .method-main {
        padding: 1.2rem 0.8rem 4rem;
      }

      .method-hero {
        padding: clamp(3.5rem, 12vw, 7rem) 0.45rem 2.5rem;
      }

      .method-hero .demo-label {
        margin-bottom: 1rem;
      }

      .method-hero h2 {
        max-width: 10ch;
        margin-bottom: 1.2rem;
        font-size: clamp(3.05rem, 14vw, 8.5rem);
        font-weight: 900;
        letter-spacing: -0.085em;
        line-height: 0.82;
        text-transform: uppercase;
      }

      .method-hero h2 span {
        display: block;
        -webkit-text-stroke: 1.5px var(--method-ink);
        color: transparent;
      }

      .method-hero > p:not(.demo-label) {
        max-width: 34rem;
        margin-bottom: 1.5rem;
        font-weight: 600;
      }

      .method-photo {
        min-height: 22rem;
        margin-top: 2.5rem;
        border: 1px solid var(--method-line);
        background:
          linear-gradient(180deg, transparent 70%, rgba(12, 13, 10, 0.18)),
          var(--img-method) center 46% / cover no-repeat;
        box-shadow: 0.8rem 0.8rem 0 var(--method-lime);
      }

      .demo-method .demo-cta {
        background: var(--method-card);
        color: var(--method-ink);
      }

      .method-board {
        border: 1px solid var(--method-line);
        background: var(--method-card);
        color: var(--method-ink);
      }

      .method-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-bottom: 1px solid var(--method-line);
      }

      .method-tabs button {
        min-height: 3.4rem;
        border: 0;
        border-right: 1px solid var(--method-line);
        background: transparent;
        cursor: pointer;
        font-family: ui-monospace, monospace;
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .method-tabs button:last-child {
        border-right: 0;
      }

      .method-tabs button[aria-selected='true'] {
        background: var(--method-ink);
        color: var(--method-card);
      }

      .method-panel {
        min-height: 24rem;
        padding: 1rem;
      }

      .method-panel[hidden] {
        display: none;
      }

      .method-panel-grid {
        display: grid;
        gap: 0.8rem;
      }

      .method-module {
        min-height: 8rem;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid var(--method-line);
      }

      .method-module strong {
        max-width: 12ch;
        font-size: 1.2rem;
        line-height: 1;
        text-transform: uppercase;
      }

      .method-module span {
        font-family: ui-monospace, monospace;
        font-size: 0.66rem;
      }

      .method-module.is-dark {
        background: var(--method-ink);
        color: var(--method-card);
      }

      .method-score {
        min-height: 20rem;
        display: grid;
        place-items: center;
        border: 1px solid var(--method-line);
        background:
          linear-gradient(var(--method-line) 1px, transparent 1px),
          linear-gradient(90deg, var(--method-line) 1px, transparent 1px);
        background-size: 2rem 2rem;
      }

      .method-score strong {
        display: grid;
        place-items: center;
        width: 9rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--method-bg);
        font-size: 3.8rem;
        letter-spacing: -0.08em;
      }

      .method-checklist {
        display: grid;
        gap: 0.65rem;
      }

      .method-checklist div {
        min-height: 4.5rem;
        padding: 0.8rem;
        display: grid;
        grid-template-columns: 2rem 1fr auto;
        align-items: center;
        gap: 0.7rem;
        border: 1px solid var(--method-line);
      }

      .method-checklist span,
      .method-checklist small {
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
      }

      /* 03 · Sal Marina — carta orgánica y formas sin retícula corporativa */
      .demo-marina {
        --marina-paper: #fff1d5;
        --marina-coral: #f2583e;
        --marina-green: #18382f;
        --marina-ink: #18382f;
        min-height: 100svh;
        overflow: hidden;
        background: var(--marina-paper);
        color: var(--marina-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-marina {
        --marina-paper: #12261f;
        --marina-coral: #ff745c;
        --marina-green: #0a1713;
        --marina-ink: #fff0d4;
      }

      .marina-nav {
        min-height: 5rem;
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .marina-nav strong {
        font-family: Georgia, serif;
        font-size: 1.1rem;
        font-style: italic;
      }

      .marina-nav span {
        display: none;
        font-size: 0.68rem;
        text-transform: uppercase;
      }

      .marina-hero {
        min-height: calc(100svh - 5rem);
        position: relative;
        padding: 4rem 1rem 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        isolation: isolate;
      }

      .marina-hero::before {
        width: clamp(18rem, 78vw, 42rem);
        aspect-ratio: 1;
        position: absolute;
        top: 4%;
        right: -18%;
        z-index: -2;
        border-radius: 50%;
        background: var(--marina-coral);
        content: "";
      }

      .marina-hero::after {
        width: 76%;
        height: 22%;
        position: absolute;
        right: -20%;
        bottom: 10%;
        z-index: -1;
        border-radius: 50% 0 0 50%;
        background: color-mix(in srgb, var(--marina-coral) 25%, transparent);
        rotate: -11deg;
        content: "";
      }

      .marina-hero h2 {
        max-width: 7ch;
        margin-bottom: 1rem;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(4.2rem, 20vw, 10rem);
        font-style: italic;
        font-weight: 400;
        letter-spacing: -0.08em;
        line-height: 0.76;
      }

      .marina-hero h2 span {
        display: block;
        translate: 0.2em 0;
      }

      .marina-plate {
        width: min(78vw, 27rem);
        aspect-ratio: 1;
        align-self: flex-end;
        position: relative;
        border: 1.1rem solid color-mix(in srgb, white 76%, var(--marina-paper));
        border-radius: 50%;
        background: var(--img-marina) center / cover no-repeat;
        box-shadow: 0 2rem 5rem rgba(104, 54, 35, 0.22);
      }

      .marina-plate::before,
      .marina-plate::after {
        display: none;
      }

      .marina-hero-foot {
        max-width: 34rem;
        display: grid;
        gap: 1rem;
      }

      .marina-menu {
        position: relative;
        padding: 5rem 1rem;
        background: var(--marina-green);
        color: #fff1d5;
      }

      .marina-menu::before {
        height: 4rem;
        inset: -2rem 0 auto;
        position: absolute;
        border-radius: 50% 50% 0 0;
        background: var(--marina-green);
        content: "";
      }

      .marina-menu-inner {
        width: min(100%, 74rem);
        margin-inline: auto;
      }

      .marina-menu h3 {
        max-width: 8ch;
        margin-bottom: 2rem;
        font-family: Georgia, serif;
        font-size: clamp(3rem, 13vw, 7rem);
        font-style: italic;
        font-weight: 400;
        line-height: 0.85;
      }

      .marina-categories {
        display: flex;
        gap: 0.55rem;
        margin-bottom: 1.4rem;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .marina-categories button {
        min-height: 2.9rem;
        flex: 0 0 auto;
        padding-inline: 1rem;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        cursor: pointer;
      }

      .marina-categories button[aria-pressed='true'] {
        background: #fff1d5;
        color: var(--marina-green);
      }

      .marina-dishes article {
        padding-block: 1.2rem;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.5rem 1rem;
        border-top: 1px solid rgba(255, 241, 213, 0.38);
      }

      .marina-dishes article[hidden] {
        display: none;
      }

      .marina-dishes h4 {
        margin: 0;
        font-family: Georgia, serif;
        font-size: 1.35rem;
        font-weight: 400;
      }

      .marina-dishes p {
        grid-column: 1 / -1;
        margin: 0;
        color: rgba(255, 241, 213, 0.7);
        font-size: 0.76rem;
      }

      /* 04 · Habitat 08 — recorrido espacial, grandes encuadres y datos */
      .demo-habitat {
        --habitat-paper: #f1f0ea;
        --habitat-ink: #1b211d;
        --habitat-line: #bfc1b9;
        min-height: 100svh;
        background: var(--habitat-paper);
        color: var(--habitat-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-habitat {
        --habitat-paper: #111512;
        --habitat-ink: #ecebe5;
        --habitat-line: #3a403b;
      }

      .habitat-top {
        min-height: 4.8rem;
        padding: 0.8rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--habitat-line);
      }

      .habitat-top strong {
        font-size: 0.9rem;
        letter-spacing: 0.08em;
      }

      .habitat-top span {
        display: none;
        font-size: 0.67rem;
      }

      .habitat-hero {
        min-height: calc(100svh - 4.8rem);
        position: relative;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        background: #52635b;
        color: white;
      }

      .habitat-hero::after {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(180deg, rgba(12, 18, 14, 0.04) 25%, rgba(12, 18, 14, 0.78) 100%);
        content: "";
        pointer-events: none;
      }

      .habitat-hero .demo-cta {
        border-color: white;
        background: white;
        color: #1b211d;
      }

      .habitat-building {
        position: absolute;
        inset: 0;
        background: var(--img-habitat-hero) center / cover no-repeat;
      }

      .habitat-building::before,
      .habitat-building::after {
        display: none;
      }

      .habitat-hero-copy {
        width: min(100% - 1.5rem, 80rem);
        z-index: 2;
        margin: 0 auto;
        padding-bottom: 2rem;
      }

      .habitat-hero h2 {
        max-width: 8ch;
        margin-bottom: 1rem;
        font-size: clamp(3.8rem, 17vw, 9rem);
        font-weight: 500;
        letter-spacing: -0.085em;
        line-height: 0.82;
      }

      .habitat-hero-copy > div {
        display: grid;
        gap: 1rem;
      }

      .habitat-hero-copy p {
        max-width: 29rem;
        margin: 0;
        color: rgba(255, 255, 255, 0.8);
      }

      .habitat-facts {
        width: min(100% - 1.5rem, 80rem);
        margin-inline: auto;
        padding-block: 4rem;
      }

      .habitat-facts > header {
        margin-bottom: 2rem;
        display: grid;
        gap: 1rem;
      }

      .habitat-facts h3 {
        max-width: 10ch;
        margin: 0;
        font-size: clamp(2.7rem, 10vw, 6rem);
        font-weight: 500;
        letter-spacing: -0.065em;
        line-height: 0.9;
      }

      .habitat-fact-grid {
        display: grid;
        border-top: 1px solid var(--habitat-line);
      }

      .habitat-fact-grid article {
        min-height: 9rem;
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-bottom: 1px solid var(--habitat-line);
      }

      .habitat-fact-grid strong {
        font-size: 2.6rem;
        font-weight: 500;
        letter-spacing: -0.07em;
      }

      .habitat-fact-grid span {
        color: color-mix(in srgb, var(--habitat-ink) 62%, transparent);
        font-size: 0.72rem;
        text-transform: uppercase;
      }

      .habitat-rooms {
        padding-block: 1rem 5rem;
      }

      .habitat-rooms > h3 {
        width: min(100% - 1.5rem, 80rem);
        margin: 0 auto 1rem;
        font-size: 1rem;
        font-weight: 600;
      }

      .habitat-rooms-head {
        width: min(100% - 1.5rem, 80rem);
        margin: 0 auto 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .habitat-rooms-head h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
      }

      .habitat-room-controls {
        display: flex;
        align-items: center;
        gap: 0.45rem;
      }

      .habitat-room-status {
        flex: 0 0 auto;
        margin-right: 0;
        color: color-mix(in srgb, var(--habitat-ink) 62%, transparent);
        font-family: ui-monospace, monospace;
        font-size: 0.64rem;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .habitat-room-arrow {
        width: 3rem;
        flex: 0 0 3rem;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--habitat-ink) 56%, var(--habitat-paper));
        border-radius: 50%;
        background: transparent;
        color: var(--habitat-ink);
        cursor: pointer;
        font-size: 1rem;
      }

      .habitat-room-arrow:disabled {
        cursor: default;
        opacity: 0.28;
      }

      .habitat-room-arrow:focus-visible {
        outline: 2px solid var(--habitat-ink);
        outline-offset: 0.16rem;
      }

      .habitat-room-rail {
        --room-card-width: min(84vw, 34rem);
        --room-edge: max(0.75rem, calc((100% - var(--room-card-width)) / 2));
        display: grid;
        grid-auto-columns: var(--room-card-width);
        grid-auto-flow: column;
        gap: 0.8rem;
        padding-inline: var(--room-edge);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: var(--room-edge);
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
      }

      .habitat-room-rail::-webkit-scrollbar {
        display: none;
      }

      .habitat-room {
        min-height: 25rem;
        padding: 1rem;
        display: flex;
        align-items: flex-end;
        scroll-snap-align: start;
        color: white;
        text-shadow: 0 0.15rem 1rem rgba(0, 0, 0, 0.45);
      }

      .habitat-room:nth-child(1) {
        background:
          linear-gradient(180deg, transparent 46%, rgba(14, 20, 15, 0.68)),
          var(--img-habitat-living) center / cover no-repeat;
      }

      .habitat-room:nth-child(2) {
        background:
          linear-gradient(180deg, transparent 46%, rgba(14, 20, 15, 0.68)),
          var(--img-habitat-patio) center / cover no-repeat;
      }

      .habitat-room:nth-child(3) {
        background:
          linear-gradient(180deg, transparent 46%, rgba(14, 20, 15, 0.68)),
          var(--img-habitat-suite) center / cover no-repeat;
      }

      .habitat-room strong {
        font-size: 1.35rem;
      }

      /* 05 · Élan — lookbook, eje vertical y carrusel protagonista */
      .demo-elan {
        --elan-paper: #f3f3ef;
        --elan-ink: #11110f;
        --elan-accent: #b39cff;
        min-height: 100svh;
        background: var(--elan-paper);
        color: var(--elan-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-elan {
        --elan-paper: #0e0e0d;
        --elan-ink: #f1f1ec;
        --elan-accent: #d1c4ff;
      }

      .elan-top {
        min-height: 4.8rem;
        padding: 0.8rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid currentColor;
      }

      .elan-top strong {
        font-size: 1.25rem;
        letter-spacing: -0.06em;
      }

      .elan-top span {
        display: none;
        font-family: ui-monospace, monospace;
        font-size: 0.66rem;
      }

      .elan-hero {
        position: relative;
        padding: 3rem 0 4rem;
        overflow: hidden;
      }

      .elan-heading {
        width: min(100% - 1.5rem, 84rem);
        margin: 0 auto 2rem;
      }

      .elan-heading h2 {
        margin-bottom: 0.7rem;
        font-size: clamp(4.4rem, 25vw, 15rem);
        font-weight: 850;
        letter-spacing: -0.115em;
        line-height: 0.68;
      }

      .elan-heading p {
        max-width: 30rem;
        margin-left: auto;
        color: color-mix(in srgb, var(--elan-ink) 62%, transparent);
      }

      .elan-lookbook {
        width: min(100% - 1.5rem, 84rem);
        margin-inline: auto;
      }

      .elan-lookbook .carousel-track {
        --carousel-size: 90%;
      }

      .elan-slide {
        min-height: 31rem;
        position: relative;
        display: flex;
        align-items: flex-end;
        padding: 1rem;
        overflow: hidden;
        background-color: #5d5268;
        background-repeat: no-repeat;
      }

      .elan-slide::before,
      .elan-slide::after {
        position: absolute;
        content: "";
      }

      .elan-slide-one {
        background:
          linear-gradient(180deg, transparent 52%, rgba(17, 13, 18, 0.72)),
          var(--img-elan-one) center 28% / cover no-repeat;
        color: white;
      }

      .elan-slide-one::before {
        display: none;
      }

      .elan-slide-two {
        background:
          linear-gradient(180deg, transparent 52%, rgba(45, 37, 38, 0.58)),
          var(--img-elan-two) center 28% / cover no-repeat;
        color: white;
      }

      .elan-slide-two::after {
        display: none;
      }

      .elan-slide-three {
        background:
          linear-gradient(180deg, transparent 52%, rgba(25, 14, 13, 0.66)),
          var(--img-elan-three) center 28% / cover no-repeat;
        color: white;
      }

      .elan-slide-three::before {
        display: none;
      }

      .elan-slide strong {
        z-index: 1;
        font-size: 1.25rem;
        text-shadow: 0 0.15rem 1rem rgba(0, 0, 0, 0.35);
      }

      .elan-sideword {
        position: absolute;
        inset: auto 0.4rem 1rem auto;
        z-index: 1;
        writing-mode: vertical-rl;
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: 0.14em;
      }

      .elan-manifesto {
        width: min(100% - 1.5rem, 84rem);
        margin-inline: auto;
        padding-block: 5rem;
        display: grid;
        gap: 2rem;
        border-top: 1px solid currentColor;
      }

      .elan-manifesto blockquote {
        max-width: 17ch;
        margin: 0;
        font-size: clamp(2.3rem, 8vw, 5rem);
        font-weight: 700;
        letter-spacing: -0.07em;
        line-height: 0.92;
      }

      .elan-manifesto div {
        max-width: 29rem;
      }

      /* 06 · Archivo — el lenguaje visual anterior vive aquí, no en la principal */
      .demo-archive {
        --archive-bg: #f3f5ff;
        --archive-surface: #ffffff;
        --archive-ink: #151a32;
        --archive-muted: #6f748b;
        --archive-blue: #5b79ff;
        --archive-peach: #ffb2a4;
        min-height: 100svh;
        background:
          radial-gradient(circle at 14% 18%, rgba(255, 178, 164, 0.34), transparent 26rem),
          radial-gradient(circle at 90% 12%, rgba(91, 121, 255, 0.28), transparent 24rem),
          var(--archive-bg);
        color: var(--archive-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-archive {
        --archive-bg: #111426;
        --archive-surface: #1a1f38;
        --archive-ink: #eff1ff;
        --archive-muted: #a6acca;
        --archive-blue: #8ea4ff;
        --archive-peach: #ff9f8c;
      }

      .archive-top {
        width: min(100% - 1.5rem, 78rem);
        min-height: 5rem;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .archive-top strong {
        display: flex;
        align-items: center;
        gap: 0.6rem;
      }

      .archive-top strong::before {
        width: 2rem;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--archive-blue);
        color: white;
        content: "D";
        font-size: 0.75rem;
      }

      .archive-top span {
        display: none;
        color: var(--archive-muted);
        font-size: 0.7rem;
      }

      .archive-hero {
        width: min(100% - 1.5rem, 78rem);
        margin-inline: auto;
        padding-block: 4rem;
        display: grid;
        gap: 2rem;
      }

      .archive-copy .demo-label {
        margin-bottom: 1rem;
        color: var(--archive-blue);
      }

      .archive-copy h2 {
        max-width: 11ch;
        margin-bottom: 1.2rem;
        font-size: clamp(3.4rem, 14vw, 7.6rem);
        font-weight: 760;
        letter-spacing: -0.085em;
        line-height: 0.86;
      }

      .archive-copy h2 em {
        color: var(--archive-blue);
        font-family: Georgia, serif;
        font-weight: 400;
      }

      .archive-copy > p:not(.demo-label) {
        max-width: 34rem;
        color: var(--archive-muted);
      }

      .archive-visual {
        min-height: 31rem;
        position: relative;
        isolation: isolate;
      }

      .archive-window {
        width: 84%;
        min-height: 23rem;
        position: absolute;
        inset: 2rem auto auto 7%;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--archive-blue) 28%, transparent);
        border-radius: 1.5rem;
        background: var(--archive-surface);
        box-shadow: 0 2rem 6rem rgba(68, 77, 131, 0.18);
      }

      .archive-window-bar {
        min-height: 2.8rem;
        padding: 0.8rem;
        display: flex;
        gap: 0.35rem;
        border-bottom: 1px solid color-mix(in srgb, var(--archive-blue) 18%, transparent);
      }

      .archive-window-bar i {
        width: 0.55rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--archive-peach);
      }

      .archive-window-body {
        padding: 1.2rem;
        display: grid;
        gap: 0.8rem;
      }

      .archive-window-body span {
        width: 42%;
        height: 0.55rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--archive-blue) 25%, transparent);
      }

      .archive-window-body strong {
        max-width: 9ch;
        font-size: 2.1rem;
        line-height: 0.95;
      }

      .archive-window-art {
        min-height: 10rem;
        border-radius: 1rem;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(104, 94, 160, 0.08)),
          var(--img-archive) center / cover no-repeat;
        box-shadow: inset 0 0 0 1px rgba(112, 117, 176, 0.12);
      }

      .archive-float {
        position: absolute;
        z-index: 2;
        padding: 1rem;
        border: 1px solid color-mix(in srgb, var(--archive-blue) 24%, transparent);
        border-radius: 1.1rem;
        background: color-mix(in srgb, var(--archive-surface) 92%, transparent);
        box-shadow: 0 1rem 3rem rgba(68, 77, 131, 0.16);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }

      .archive-float.one {
        right: 0;
        top: 0;
      }

      .archive-float.two {
        left: 0;
        bottom: 1rem;
      }

      .archive-float small {
        display: block;
        margin-bottom: 0.4rem;
        color: var(--archive-muted);
        font-size: 0.62rem;
        text-transform: uppercase;
      }

      .archive-bento {
        width: min(100% - 1.5rem, 78rem);
        margin-inline: auto;
        padding-block: 1rem 5rem;
        display: grid;
        gap: 0;
        border-top: 1px solid color-mix(in srgb, var(--archive-blue) 24%, transparent);
      }

      .archive-bento article {
        min-height: 0;
        padding: 1.4rem 0;
        display: grid;
        grid-template-columns: 5rem 1fr;
        gap: 0.6rem 1rem;
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--archive-blue) 24%, transparent);
        border-radius: 0;
        background: transparent;
      }

      .archive-bento article:nth-child(2) {
        background: transparent;
        color: inherit;
      }

      .archive-bento span {
        grid-row: 1 / 3;
        color: var(--archive-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.64rem;
      }

      .archive-bento article:nth-child(2) span {
        color: var(--archive-blue);
      }

      .archive-bento h3 {
        max-width: 25ch;
        margin: 0;
        font-size: clamp(1.45rem, 5vw, 2.25rem);
        font-weight: 650;
        letter-spacing: -0.055em;
        line-height: 1.02;
      }

      .archive-bento p {
        max-width: 34rem;
        margin: 0;
        color: var(--archive-muted);
        font-size: 0.82rem;
      }

      @media (min-width: 48rem) {
        .demo-controls {
          inset: max(1rem, env(safe-area-inset-top)) 1rem auto auto;
        }

        .demo-controls .demo-back {
          width: auto;
          padding-inline: 1rem;
          font-size: 0.76rem;
        }

        .blanc-nav small,
        .method-top span,
        .marina-nav span,
        .habitat-top span,
        .elan-top span,
        .archive-top span {
          display: inline;
          margin-right: 11.5rem;
        }

        .carousel-track {
          --carousel-size: 58%;
        }

        .blanc-nav,
        .method-top,
        .marina-nav,
        .habitat-top,
        .elan-top {
          padding-inline: 2rem;
        }

        .blanc-hero {
          grid-template-columns: minmax(0, 0.86fr) minmax(24rem, 1fr);
          align-items: stretch;
          padding-block: 2rem 6rem;
        }

        .blanc-copy {
          padding-bottom: 3rem;
        }

        .blanc-copy h2 {
          font-size: clamp(5rem, 9vw, 7.3rem);
        }

        .blanc-copy h2 em {
          max-width: calc(100% - 0.1em);
          translate: 0.1em 0;
        }

        .blanc-portrait {
          min-height: 45rem;
        }

        .blanc-notes .carousel-track {
          --carousel-size: 46%;
        }

        .blanc-service-list article {
          grid-template-columns: 4rem 1fr auto;
          padding-block: 1.5rem;
        }

        .blanc-service-list article strong {
          font-size: 1.65rem;
        }

        .method-layout {
          display: grid;
          grid-template-columns: 10rem 1fr;
        }

        .method-rail {
          padding: 1rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          border-right: 1px solid var(--method-line);
          font-family: ui-monospace, monospace;
          font-size: 0.65rem;
          text-transform: uppercase;
        }

        .method-rail ol {
          margin: 0;
          padding: 0;
          display: grid;
          gap: 1rem;
          list-style: none;
        }

        .method-main {
          padding: 1.5rem 2rem 5rem;
        }

        .method-hero {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.68fr);
          gap: 2rem;
          align-items: start;
        }

        .method-hero .demo-label {
          grid-column: 1;
          grid-row: 1;
        }

        .method-hero h2 {
          grid-column: 1;
          grid-row: 2;
          margin: 0;
          font-size: clamp(4.75rem, 8vw, 7rem);
        }

        .method-hero > p:not(.demo-label) {
          grid-column: 1;
          grid-row: 3;
          margin-bottom: 0;
        }

        .method-hero > .demo-cta {
          grid-column: 1;
          grid-row: 4;
          justify-self: start;
        }

        .method-photo {
          min-height: 35rem;
          margin: 0;
          grid-column: 2;
          grid-row: 1 / 5;
        }

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

        .method-score {
          min-height: 27rem;
        }

        .marina-hero {
          padding: 5rem 3rem 3rem;
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(26rem, 0.7fr);
          align-items: center;
        }

        .marina-hero h2 {
          align-self: center;
          font-size: clamp(5rem, 10vw, 8.25rem);
        }

        .marina-hero h2 span {
          translate: 0.12em 0;
        }

        .marina-plate {
          width: min(100%, 27rem);
          grid-column: 2;
          grid-row: 1 / 3;
        }

        .marina-hero-foot {
          grid-column: 1;
          align-self: end;
        }

        .marina-menu {
          padding-inline: 3rem;
        }

        .marina-dishes article {
          grid-template-columns: minmax(15rem, 0.8fr) 1fr auto;
          align-items: baseline;
        }

        .marina-dishes p {
          grid-column: auto;
        }

        .habitat-hero-copy > div {
          grid-template-columns: 1fr auto;
          align-items: end;
        }

        .habitat-facts > header {
          grid-template-columns: 1fr 0.6fr;
          align-items: end;
        }

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

        .habitat-fact-grid article {
          padding-inline: 1rem;
          border-right: 1px solid var(--habitat-line);
        }

        .habitat-room-rail {
          --room-card-width: min(42vw, 34rem);
          --room-edge: max(1.5rem, calc((100% - 80rem) / 2));
        }

        .elan-lookbook .carousel-track {
          --carousel-size: 69%;
        }

        .elan-slide {
          min-height: 43rem;
          background-color: #756880;
          background-position: center, center;
          background-size: 100% 100%, contain;
        }

        .elan-manifesto {
          grid-template-columns: 1fr 0.55fr;
          align-items: end;
        }

        .archive-hero {
          grid-template-columns: minmax(0, 0.88fr) minmax(24rem, 1fr);
          align-items: center;
          min-height: calc(100svh - 5rem);
        }

        .archive-copy h2 {
          font-size: clamp(4.7rem, 7vw, 6.5rem);
        }

        .archive-visual {
          min-height: 39rem;
        }

        .archive-window {
          min-height: 30rem;
        }

        .archive-window-art {
          min-height: 16rem;
        }

        .archive-bento {
          grid-template-columns: 0.8fr 1.2fr 0.8fr;
        }
      }

      @media (min-width: 48rem) and (max-width: 59.99rem) {
        .method-layout {
          grid-template-columns: 8rem 1fr;
        }

        .method-main {
          padding-inline: 1.5rem;
        }

        .method-hero {
          grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.68fr);
          gap: 1.5rem;
        }

        .method-hero h2 {
          font-size: clamp(3.15rem, 5.7vw, 4rem);
        }

        .method-photo {
          min-height: 31rem;
        }
      }

      /* --- Revisión editorial de portada, navegación y movimiento --- */
      .promise-band {
        margin-bottom: clamp(5rem, 12vw, 9rem);
        padding-block: clamp(2.3rem, 6vw, 4.5rem);
        display: grid;
        gap: 2.5rem;
        border-block: 1px solid var(--line);
      }

      .promise-lead .kicker {
        margin-bottom: 1.2rem;
      }

      .promise-lead h2 {
        max-width: 10ch;
        margin: 0;
        font-size: clamp(2.35rem, 7vw, 4.5rem);
        font-weight: 560;
        letter-spacing: -0.065em;
        line-height: 0.94;
      }

      .promise-points {
        margin: 0;
        padding: 0;
        display: grid;
        list-style: none;
      }

      .promise-points li {
        padding-block: 1.15rem;
        display: grid;
        grid-template-columns: 2rem 1fr;
        gap: 0.35rem 0.8rem;
        border-top: 1px solid var(--line);
      }

      .promise-points li:first-child {
        border-top: 0;
      }

      .promise-points span {
        grid-row: 1 / 3;
        color: var(--muted);
        font-family: ui-monospace, monospace;
        font-size: 0.64rem;
      }

      .promise-points strong {
        font-size: 0.92rem;
      }

      .promise-points p {
        margin: 0;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .visual-nova {
        padding: 1.2rem;
        display: flex;
        align-items: flex-end;
        background:
          radial-gradient(circle at 76% 22%, rgba(135, 110, 255, 0.65), transparent 26%),
          radial-gradient(circle at 24% 84%, rgba(43, 190, 255, 0.28), transparent 30%),
          #080912;
        color: white;
      }

      .visual-nova::before {
        width: 64%;
        height: 58%;
        position: absolute;
        inset: 16% 12% auto auto;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 1rem;
        background:
          linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
          rgba(10, 11, 23, 0.72);
        background-size: 2rem 2rem;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
        content: "";
        transform: perspective(30rem) rotateY(-10deg) rotateX(4deg);
      }

      .visual-nova-orbit {
        width: 7rem;
        aspect-ratio: 1;
        position: absolute;
        inset: 2rem auto auto 1.6rem;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 50%;
      }

      .visual-nova-orbit::before,
      .visual-nova-orbit::after {
        position: absolute;
        border-radius: 50%;
        content: "";
      }

      .visual-nova-orbit::before {
        width: 0.7rem;
        aspect-ratio: 1;
        inset: 0.6rem 0.7rem auto auto;
        background: #a68cff;
        box-shadow: 0 0 1.4rem #a68cff;
      }

      .visual-nova-orbit::after {
        inset: 1.2rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
      }

      .visual-nova span,
      .visual-grid > span,
      .visual-bruma span,
      .visual-aura span {
        z-index: 2;
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .visual-aura {
        padding: 1.2rem;
        display: flex;
        align-items: flex-end;
        background:
          linear-gradient(180deg, transparent 58%, rgba(35, 31, 26, 0.26)),
          var(--img-aura) center 48% / cover no-repeat,
          #eeeae3;
        color: #26211d;
      }

      .visual-aura::before {
        display: none;
      }

      .visual-grid {
        padding: 1.2rem;
        display: flex;
        align-items: flex-end;
        background:
          linear-gradient(#d8d8d8 1px, transparent 1px),
          linear-gradient(90deg, #d8d8d8 1px, transparent 1px),
          #f9f9f7;
        background-size: 2rem 2rem;
        color: #090909;
      }

      .visual-grid-mark {
        width: 72%;
        min-height: 48%;
        position: absolute;
        inset: 18% auto auto 14%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.45rem;
      }

      .visual-grid-mark i {
        border: 1px solid #111;
        background: rgba(255, 255, 255, 0.85);
      }

      .visual-grid-mark i:nth-child(2) {
        background: #111;
      }

      .visual-grid-mark i:nth-child(3) {
        background: radial-gradient(circle, #111 0.17rem, transparent 0.19rem) 0 0 / 0.9rem 0.9rem, #fff;
      }

      .visual-bruma {
        padding: 1.2rem;
        display: flex;
        align-items: flex-end;
        background:
          linear-gradient(180deg, transparent 45%, rgba(20, 24, 20, 0.66)),
          var(--img-bruma-hero) center / cover no-repeat;
        color: white;
      }

      .visual-bruma::before {
        display: none;
      }

      @keyframes dianet-demo-enter {
        from { opacity: 0; transform: translateY(1.35rem); }
        to { opacity: 1; transform: none; }
      }

      @keyframes dianet-demo-scale {
        from { opacity: 0; transform: scale(1.035); }
        to { opacity: 1; transform: scale(1); }
      }

      @keyframes nova-orbit {
        from { transform: rotate(0deg) translateX(1.2rem) rotate(0deg); }
        to { transform: rotate(360deg) translateX(1.2rem) rotate(-360deg); }
      }

      @keyframes soft-drift {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(1.2rem, -0.8rem, 0) scale(1.04); }
      }

      @keyframes grid-scan {
        from { transform: translateY(-120%); }
        to { transform: translateY(480%); }
      }

      @keyframes sound-pulse {
        0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
        50% { transform: scaleY(1); opacity: 1; }
      }

      .demo-view.is-entering [data-enter] {
        animation: dianet-demo-enter 760ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
      }

      .demo-view.is-entering [data-enter='2'] {
        animation-delay: 100ms;
      }

      .demo-view.is-entering [data-enter='3'] {
        animation: dianet-demo-scale 900ms cubic-bezier(0.2, 0.75, 0.2, 1) 190ms both;
      }

      html.reveal-ready [data-reveal] {
        opacity: 0;
        transform: translateY(1.65rem);
        transition: opacity 720ms ease, transform 720ms cubic-bezier(0.2, 0.75, 0.2, 1);
      }

      html.reveal-ready [data-reveal].is-visible {
        opacity: 1;
        transform: none;
      }

      .demo-inline-nav {
        display: flex;
        align-items: center;
        gap: 0.15rem;
        margin-left: auto;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .demo-inline-nav::-webkit-scrollbar {
        display: none;
      }

      .demo-inline-nav button {
        min-height: 2.75rem;
        flex: 0 0 auto;
        padding: 0.45rem 0.7rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font: inherit;
        font-size: 0.68rem;
      }

      .demo-inline-nav button:hover,
      .demo-inline-nav button:focus-visible {
        background: color-mix(in srgb, currentColor 9%, transparent);
      }

      .demo-view section[id] {
        scroll-margin-top: 5.5rem;
      }

      .demo-story,
      .demo-closing {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
      }

      .demo-story {
        padding-block: clamp(4rem, 10vw, 7rem);
        border-top: 1px solid currentColor;
      }

      .demo-story-heading {
        margin-bottom: 2.5rem;
        display: grid;
        gap: 0.75rem;
      }

      .demo-story-heading h3,
      .demo-closing h3 {
        max-width: 12ch;
        margin: 0;
        font-family: Georgia, serif;
        font-size: clamp(2.7rem, 9vw, 5.8rem);
        font-weight: 400;
        letter-spacing: -0.065em;
        line-height: 0.92;
      }

      .demo-story-grid {
        display: grid;
        gap: 0.8rem;
      }

      .demo-story-grid article {
        padding: 1.2rem 0;
        display: grid;
        grid-template-columns: 2rem 1fr;
        gap: 0.5rem 0.8rem;
        border-top: 1px solid currentColor;
      }

      .demo-story-grid article span {
        grid-row: 1 / 3;
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        opacity: 0.58;
      }

      .demo-story-grid article p {
        margin: 0;
        font-size: 0.82rem;
        opacity: 0.68;
      }

      .demo-story blockquote {
        max-width: 28ch;
        margin: clamp(3rem, 8vw, 6rem) 0 0 auto;
        font-family: Georgia, serif;
        font-size: clamp(1.55rem, 4vw, 2.5rem);
        line-height: 1.2;
      }

      .demo-story cite,
      .method-outcomes cite,
      .marina-visit cite {
        display: block;
        margin-top: 1rem;
        font-family: Arial, sans-serif;
        font-size: 0.68rem;
        font-style: normal;
        opacity: 0.6;
      }

      .demo-closing {
        margin-bottom: 1rem;
        padding: clamp(2rem, 7vw, 5rem);
        border-radius: 0.25rem;
        text-align: center;
      }

      .demo-closing h3 {
        margin-inline: auto;
      }

      .demo-closing > p:not(.demo-label) {
        max-width: 34rem;
        margin: 1rem auto 1.5rem;
      }

      .blanc-booking {
        background: var(--blanc-ink);
        color: var(--blanc-paper);
      }

      .blanc-hero::before {
        width: 36rem;
        aspect-ratio: 1;
        position: absolute;
        inset: 8rem auto auto -18rem;
        border-radius: 50%;
        background: rgba(201, 169, 145, 0.18);
        content: "";
        filter: blur(4rem);
        pointer-events: none;
        animation: soft-drift 18s ease-in-out infinite;
      }

      .blanc-hero {
        position: relative;
        isolation: isolate;
      }

      .method-outcomes,
      .method-offer {
        margin-top: 1rem;
        padding: clamp(2rem, 6vw, 4rem) 1rem;
        border: 1px solid var(--method-line);
        background: var(--method-card);
      }

      .method-outcomes header h3,
      .method-offer h3 {
        max-width: 14ch;
        margin: 0;
        font-size: clamp(2.4rem, 7vw, 4.5rem);
        font-weight: 900;
        letter-spacing: -0.065em;
        line-height: 0.9;
        text-transform: uppercase;
      }

      .method-outcomes > div {
        margin-top: 2rem;
        display: grid;
        border-top: 1px solid var(--method-line);
      }

      .method-outcomes article {
        padding: 1.2rem 0;
        border-bottom: 1px solid var(--method-line);
      }

      .method-outcomes article > strong {
        font-family: ui-monospace, monospace;
        font-size: 0.68rem;
      }

      .method-outcomes h4 {
        margin: 1.5rem 0 0.4rem;
        font-size: 1.25rem;
        text-transform: uppercase;
      }

      .method-outcomes article p {
        max-width: 28rem;
        margin: 0;
        font-size: 0.82rem;
      }

      .method-outcomes blockquote {
        max-width: 28ch;
        margin: 3rem 0 0 auto;
        font-size: clamp(1.5rem, 4vw, 2.4rem);
        font-weight: 800;
        line-height: 1.05;
        text-transform: uppercase;
      }

      .method-offer {
        margin-bottom: 1rem;
        display: grid;
        gap: 2rem;
        background: var(--method-ink);
        color: var(--method-card);
      }

      .method-offer > div:last-child > strong {
        display: block;
        font-size: 2.3rem;
        letter-spacing: -0.06em;
      }

      .method-offer .demo-cta {
        background: var(--method-bg);
        color: var(--method-ink);
      }

      .marina-origin,
      .marina-visit {
        width: min(100% - 1.5rem, 74rem);
        margin-inline: auto;
        padding-block: clamp(4rem, 10vw, 7rem);
      }

      .marina-origin {
        display: grid;
        gap: 2rem;
      }

      .marina-origin-art {
        min-height: 31rem;
        border-radius: 50% 50% 0.25rem 0.25rem;
        background: linear-gradient(180deg, transparent 60%, rgba(24, 56, 47, 0.25)), var(--img-marina) center / cover no-repeat;
      }

      .marina-origin h3,
      .marina-visit h3 {
        max-width: 10ch;
        font-family: Georgia, serif;
        font-size: clamp(3rem, 9vw, 6rem);
        font-style: italic;
        font-weight: 400;
        letter-spacing: -0.065em;
        line-height: 0.88;
      }

      .marina-origin p:not(.demo-label) {
        max-width: 32rem;
      }

      .marina-origin ul {
        margin: 2rem 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        list-style: none;
      }

      .marina-origin li {
        padding: 0.65rem 0.9rem;
        border: 1px solid currentColor;
        border-radius: 999px;
        font-size: 0.72rem;
      }

      .marina-visit {
        margin-bottom: 1rem;
        padding-inline: clamp(1.5rem, 6vw, 5rem);
        border-radius: 45% 45% 0.4rem 0.4rem;
        background: var(--marina-coral);
        color: var(--marina-green);
        text-align: center;
      }

      .marina-visit h3,
      .marina-visit blockquote {
        margin-inline: auto;
      }

      .marina-visit blockquote {
        max-width: 31ch;
        margin-block: 3rem;
        font-family: Georgia, serif;
        font-size: 1.45rem;
        font-style: italic;
      }

      .habitat-availability,
      .habitat-contact {
        width: min(100% - 1.5rem, 80rem);
        margin-inline: auto;
      }

      .habitat-availability {
        padding-block: 4rem;
        border-top: 1px solid var(--habitat-line);
      }

      .habitat-availability h3,
      .habitat-contact h3 {
        max-width: 12ch;
        font-size: clamp(2.8rem, 8vw, 5.5rem);
        font-weight: 500;
        letter-spacing: -0.07em;
        line-height: 0.9;
      }

      .habitat-availability > div {
        display: grid;
        border-top: 1px solid var(--habitat-line);
      }

      .habitat-availability article {
        padding: 1.2rem 0;
        display: grid;
        gap: 0.4rem;
        border-bottom: 1px solid var(--habitat-line);
      }

      .habitat-availability article strong {
        font-size: 2rem;
        font-weight: 500;
      }

      .habitat-availability article small {
        color: color-mix(in srgb, var(--habitat-ink) 60%, transparent);
      }

      .habitat-contact {
        margin-bottom: 1rem;
        padding: clamp(2rem, 7vw, 5rem);
        display: grid;
        gap: 2rem;
        background: var(--habitat-ink);
        color: var(--habitat-paper);
      }

      .elan-products,
      .elan-newsletter {
        width: min(100% - 1.5rem, 84rem);
        margin-inline: auto;
      }

      .elan-products {
        padding-block: clamp(4rem, 10vw, 8rem);
        border-top: 1px solid currentColor;
      }

      .elan-products header {
        margin-bottom: 2rem;
      }

      .elan-products h3,
      .elan-newsletter h3 {
        max-width: 12ch;
        font-size: clamp(2.8rem, 8vw, 5.5rem);
        letter-spacing: -0.075em;
        line-height: 0.9;
      }

      .elan-products > div {
        display: grid;
        gap: 0.8rem;
      }

      .elan-products article > div {
        min-height: 28rem;
        margin-bottom: 1rem;
        background-position: center 28%;
        background-size: cover;
      }

      .elan-product-one > div { background-image: var(--img-elan-one); }
      .elan-product-two > div { background-image: var(--img-elan-two); }
      .elan-product-three > div { background-image: var(--img-elan-three); }

      .elan-products article span,
      .elan-products article strong,
      .elan-products article small {
        display: block;
      }

      .elan-products article span { font-size: 0.8rem; }
      .elan-products article strong { margin-block: 0.25rem; font-size: 1.1rem; }
      .elan-products article small { opacity: 0.58; }

      .elan-newsletter {
        margin-bottom: 1rem;
        padding: clamp(2.5rem, 8vw, 6rem);
        background: var(--elan-accent);
        color: #11110f;
        text-align: center;
      }

      .elan-newsletter h3,
      .elan-newsletter > p:not(.demo-label) {
        margin-inline: auto;
      }

      .elan-newsletter > p:not(.demo-label) {
        max-width: 32rem;
      }

      .archive-work,
      .archive-process,
      .archive-packages {
        width: min(100% - 1.5rem, 78rem);
        margin-inline: auto;
      }

      .archive-work {
        padding-block: clamp(4rem, 10vw, 7rem);
      }

      .archive-work h3,
      .archive-packages h3 {
        max-width: 12ch;
        font-size: clamp(2.8rem, 8vw, 5.5rem);
        letter-spacing: -0.075em;
        line-height: 0.9;
      }

      .archive-work > div {
        display: grid;
        gap: 0.8rem;
      }

      .archive-work article {
        min-height: 18rem;
        padding: 1.3rem;
        display: flex;
        flex-direction: column;
        border: 1px solid color-mix(in srgb, var(--archive-blue) 20%, transparent);
        border-radius: 1.3rem;
        background: var(--archive-surface);
      }

      .archive-work article > span,
      .archive-process span {
        color: var(--archive-muted);
        font-size: 0.68rem;
      }

      .archive-work article > strong {
        margin-block: auto 1rem;
        color: var(--archive-blue);
        font-size: 4rem;
        letter-spacing: -0.08em;
      }

      .archive-work article p { margin: 0; color: var(--archive-muted); }

      .archive-process {
        padding-block: 3rem;
        border-top: 1px solid color-mix(in srgb, var(--archive-blue) 22%, transparent);
      }

      .archive-process ol {
        margin: 2rem 0 0;
        padding: 0;
        display: grid;
        list-style: none;
      }

      .archive-process li {
        padding: 1.2rem 0;
        display: grid;
        grid-template-columns: 2rem 1fr;
        gap: 0.35rem 0.8rem;
        border-top: 1px solid color-mix(in srgb, var(--archive-blue) 18%, transparent);
      }

      .archive-process li span { grid-row: 1 / 3; }
      .archive-process li p { margin: 0; color: var(--archive-muted); font-size: 0.8rem; }

      .archive-packages {
        margin-bottom: 1rem;
        padding: clamp(2.5rem, 8vw, 5rem);
        display: grid;
        gap: 2rem;
        border-radius: 1.5rem;
        background: var(--archive-blue);
        color: white;
      }

      .lead-dialog {
        width: min(calc(100% - 1.5rem), 34rem);
        padding: clamp(1.5rem, 5vw, 2.7rem);
        position: fixed;
        border: 1px solid var(--line);
        border-radius: 1.4rem;
        background: var(--surface);
        color: var(--ink);
        box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.28);
      }

      .lead-dialog::backdrop {
        background: rgba(5, 5, 5, 0.58);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }

      .lead-dialog h2 {
        max-width: 12ch;
        margin: 0.8rem 0 1rem;
        font-size: clamp(2.4rem, 8vw, 4rem);
        letter-spacing: -0.07em;
        line-height: 0.92;
      }

      .lead-dialog > p:not(.demo-label) {
        color: var(--muted);
      }

      .lead-dialog-close {
        width: 2.8rem;
        aspect-ratio: 1;
        position: absolute;
        inset: 0.8rem 0.8rem auto auto;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-size: 1.4rem;
      }

      .lead-dialog-note {
        margin-block: 1.5rem;
        padding: 0.8rem;
        border-radius: 0.7rem;
        background: var(--soft);
        color: var(--muted);
        font-size: 0.72rem;
      }

      .lead-dialog-note span {
        margin-right: 0.45rem;
        color: #24a762;
      }

      @media (min-width: 48rem) {
        .promise-band {
          grid-template-columns: minmax(15rem, 0.7fr) 1.3fr;
          align-items: start;
        }

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

        .promise-points li,
        .promise-points li:first-child {
          min-height: 11rem;
          padding: 0 1rem;
          align-content: start;
          border-top: 0;
          border-left: 1px solid var(--line);
        }

        .demo-inline-nav {
          margin-right: 10.5rem;
        }

        .demo-story-grid,
        .method-outcomes > div,
        .habitat-availability > div,
        .elan-products > div,
        .archive-process ol {
          grid-template-columns: repeat(3, 1fr);
        }

        .demo-story-grid article,
        .method-outcomes article,
        .habitat-availability article,
        .archive-process li {
          padding-inline: 1rem;
          border-left: 1px solid currentColor;
          border-bottom: 0;
        }

        .demo-story-grid article:first-child,
        .method-outcomes article:first-child,
        .habitat-availability article:first-child,
        .archive-process li:first-child {
          border-left: 0;
        }

        .method-outcomes,
        .method-offer {
          padding-inline: 2rem;
        }

        .method-offer,
        .habitat-contact,
        .archive-packages {
          grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr);
          align-items: end;
        }

        .marina-origin {
          grid-template-columns: minmax(22rem, 0.85fr) 1fr;
          align-items: center;
        }

        .archive-work > div {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 47.99rem) {
        .blanc-nav,
        .method-top,
        .marina-nav,
        .habitat-top,
        .elan-top,
        .archive-top {
          min-height: 7rem;
          padding-right: 7.2rem;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          gap: 0.2rem;
        }

        .demo-inline-nav {
          width: 100%;
          margin: 0;
        }

        .demo-inline-nav button {
          padding-inline: 0.45rem;
        }
      }

      /* --- 07 · Nova OS: SaaS oscuro, producto protagonista --- */
      .demo-nova {
        --nova-bg: #070810;
        --nova-surface: #0f111c;
        --nova-surface-2: #151827;
        --nova-line: rgba(255, 255, 255, 0.11);
        --nova-ink: #f3f4f8;
        --nova-muted: #9ca1b2;
        --nova-violet: #8a75ff;
        min-height: 100svh;
        overflow: hidden;
        background: var(--nova-bg);
        color: var(--nova-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      .nova-nav {
        width: min(100% - 1.5rem, 82rem);
        min-height: 4.8rem;
        margin-inline: auto;
        padding-right: 7.1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        border-bottom: 1px solid var(--nova-line);
      }

      .nova-nav > strong {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        letter-spacing: -0.04em;
      }

      .nova-nav > strong i {
        width: 1.35rem;
        aspect-ratio: 1;
        border-radius: 38% 62% 62% 38%;
        background: linear-gradient(135deg, #b9aaff, #6650ff);
        box-shadow: 0 0 1.4rem rgba(138, 117, 255, 0.6);
        transform: rotate(18deg);
      }

      .nova-nav .demo-inline-nav {
        margin-right: 0;
      }

      .nova-nav-cta {
        min-height: 2.65rem;
        padding: 0.55rem 0.9rem;
        border: 1px solid var(--nova-line);
        border-radius: 999px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-size: 0.7rem;
      }

      .nova-actions > button:last-child {
        min-height: 2.65rem;
        padding: 0.55rem 0.2rem;
        border: 0;
        border-bottom: 1px solid currentColor;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-size: 0.7rem;
      }

      .nova-nav-cta {
        display: none;
        background: var(--nova-ink);
        color: var(--nova-bg);
        font-weight: 800;
      }

      .nova-hero {
        width: min(100% - 1.5rem, 82rem);
        min-height: calc(100svh - 4.8rem);
        position: relative;
        margin-inline: auto;
        padding-block: clamp(4rem, 10vw, 8rem) 5rem;
        display: grid;
        gap: 3rem;
        isolation: isolate;
      }

      .nova-hero::before,
      .nova-hero::after {
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        content: "";
        pointer-events: none;
      }

      .nova-hero::before {
        width: 28rem;
        aspect-ratio: 1;
        inset: 8% -15% auto auto;
        background: radial-gradient(circle, rgba(121, 91, 255, 0.3), transparent 68%);
        animation: soft-drift 17s ease-in-out infinite;
      }

      .nova-hero::after {
        width: 0.45rem;
        aspect-ratio: 1;
        inset: 18% 8% auto auto;
        background: #b7a7ff;
        box-shadow: 0 0 1.2rem #b7a7ff;
        animation: nova-orbit 11s linear infinite;
      }

      .nova-hero-copy {
        align-self: center;
      }

      .nova-hero-copy .demo-label,
      .nova-product .demo-label,
      .nova-workflow .demo-label,
      .nova-security .demo-label,
      .nova-close .demo-label {
        color: #b7adff;
      }

      .nova-hero h2 {
        max-width: 10ch;
        margin: 1rem 0 1.3rem;
        font-size: clamp(3.5rem, 14vw, 7.8rem);
        font-weight: 640;
        letter-spacing: -0.085em;
        line-height: 0.83;
      }

      .nova-hero h2 span {
        display: block;
        background: linear-gradient(110deg, #f0edff, #8c79ff 48%, #58c8ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .nova-hero-copy > p:not(.demo-label) {
        max-width: 34rem;
        color: var(--nova-muted);
        font-size: 0.95rem;
      }

      .nova-actions {
        margin-block: 1.6rem 2.4rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
      }

      .demo-nova .demo-cta {
        border-color: transparent;
        background: var(--nova-ink);
        color: var(--nova-bg);
      }

      .nova-proof {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.8rem 1.2rem;
        color: var(--nova-muted);
      }

      .nova-proof span {
        width: 100%;
        font-size: 0.65rem;
      }

      .nova-proof strong {
        font-size: 0.67rem;
        letter-spacing: 0.12em;
      }

      .nova-product-window {
        min-height: 31rem;
        align-self: center;
        overflow: hidden;
        border: 1px solid var(--nova-line);
        border-radius: 1rem;
        background: rgba(12, 14, 25, 0.88);
        box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.45), 0 0 5rem rgba(104, 84, 255, 0.12);
      }

      .nova-window-top {
        min-height: 2.8rem;
        padding: 0.7rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.7rem;
        border-bottom: 1px solid var(--nova-line);
        color: var(--nova-muted);
      }

      .nova-window-top > span {
        display: flex;
        gap: 0.3rem;
      }

      .nova-window-top i {
        width: 0.48rem;
        aspect-ratio: 1;
        display: block;
        border-radius: 50%;
        background: #3b3e4b;
      }

      .nova-window-top small,
      .nova-window-top b {
        font-family: ui-monospace, monospace;
        font-size: 0.58rem;
        font-weight: 400;
      }

      .nova-window-top b {
        padding: 0.25rem 0.42rem;
        border: 1px solid var(--nova-line);
        border-radius: 0.35rem;
      }

      .nova-window-body {
        min-height: 28rem;
        display: grid;
        grid-template-columns: 2.9rem 1fr;
      }

      .nova-window-body > aside {
        padding: 0.7rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        border-right: 1px solid var(--nova-line);
      }

      .nova-window-body > aside strong {
        width: 1.45rem;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 0.4rem;
        background: var(--nova-violet);
        font-size: 0.62rem;
      }

      .nova-window-body > aside i {
        width: 0.75rem;
        aspect-ratio: 1;
        border: 1px solid #55596b;
        border-radius: 0.25rem;
      }

      .nova-dashboard {
        min-width: 0;
        padding: 1rem;
      }

      .nova-dashboard > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .nova-dashboard h3 {
        margin: 0.2rem 0 0;
        font-size: 1.25rem;
        letter-spacing: -0.04em;
      }

      .nova-dashboard header small {
        color: var(--nova-muted);
        font-size: 0.58rem;
      }

      .nova-dashboard header .nova-add-mark {
        width: 2rem;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 0.5rem;
        background: var(--nova-ink);
        color: var(--nova-bg);
      }

      .nova-metrics {
        margin-block: 1rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.45rem;
      }

      .nova-metrics article {
        min-width: 0;
        padding: 0.65rem;
        border: 1px solid var(--nova-line);
        border-radius: 0.55rem;
        background: rgba(255, 255, 255, 0.025);
      }

      .nova-metrics span,
      .nova-metrics small {
        display: block;
        overflow: hidden;
        color: var(--nova-muted);
        font-size: 0.48rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .nova-metrics strong {
        display: block;
        margin-block: 0.5rem;
        font-size: 1.25rem;
        letter-spacing: -0.05em;
      }

      .nova-board {
        display: grid;
        gap: 0.5rem;
      }

      .nova-board > section {
        padding: 0.6rem;
        border: 1px solid var(--nova-line);
        border-radius: 0.6rem;
      }

      .nova-board section > header {
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        color: var(--nova-muted);
        font-size: 0.55rem;
      }

      .nova-board article {
        margin-top: 0.35rem;
        padding: 0.55rem;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem;
        border-radius: 0.45rem;
        background: var(--nova-surface-2);
      }

      .nova-board article small {
        grid-column: 1 / -1;
        color: #858aa0;
        font-size: 0.48rem;
      }

      .nova-board article strong {
        overflow: hidden;
        font-size: 0.6rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .nova-board article span {
        color: #a7aab8;
        font-size: 0.48rem;
      }

      .nova-product,
      .nova-workflow,
      .nova-security,
      .nova-close,
      .nova-footer {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
      }

      .nova-product {
        padding-block: clamp(5rem, 12vw, 9rem);
        border-top: 1px solid var(--nova-line);
      }

      .nova-product > header h3,
      .nova-workflow h3,
      .nova-security h3,
      .nova-close h3 {
        max-width: 13ch;
        margin: 0;
        font-size: clamp(2.8rem, 8vw, 5.5rem);
        font-weight: 560;
        letter-spacing: -0.07em;
        line-height: 0.9;
      }

      .nova-bento {
        margin-top: 3rem;
        display: grid;
        gap: 0.8rem;
      }

      .nova-bento > article {
        min-height: 23rem;
        padding: clamp(1.2rem, 4vw, 2rem);
        overflow: hidden;
        border: 1px solid var(--nova-line);
        border-radius: 1.2rem;
        background: var(--nova-surface);
      }

      .nova-bento article > span {
        color: var(--nova-muted);
        font-size: 0.65rem;
      }

      .nova-bento h4 {
        max-width: 17ch;
        margin: 1rem 0 2rem;
        font-size: clamp(1.5rem, 4vw, 2.3rem);
        letter-spacing: -0.055em;
        line-height: 1;
      }

      .nova-inbox {
        padding: 0.6rem;
        border: 1px solid var(--nova-line);
        border-radius: 0.75rem;
        background: #0b0d16;
      }

      .nova-inbox p {
        margin: 0;
        padding: 0.7rem;
        display: grid;
        grid-template-columns: 1rem 1fr;
        border-bottom: 1px solid var(--nova-line);
      }

      .nova-inbox p:last-child { border-bottom: 0; }
      .nova-inbox i { grid-row: 1 / 3; color: #74e5a7; font-size: 0.55rem; }
      .nova-inbox strong { font-size: 0.72rem; }
      .nova-inbox small { color: var(--nova-muted); font-size: 0.57rem; }

      .nova-chart {
        height: 10rem;
        display: flex;
        align-items: flex-end;
        gap: 0.4rem;
        border-bottom: 1px solid var(--nova-line);
      }

      .nova-chart i {
        width: 100%;
        height: 45%;
        border-radius: 0.3rem 0.3rem 0 0;
        background: linear-gradient(#907cff, #5849c8);
      }

      .nova-chart i:nth-child(2) { height: 62%; }
      .nova-chart i:nth-child(3) { height: 38%; }
      .nova-chart i:nth-child(4) { height: 76%; }
      .nova-chart i:nth-child(5) { height: 58%; }
      .nova-chart i:nth-child(6) { height: 91%; }
      .nova-chart i:nth-child(7) { height: 74%; }

      .nova-bento blockquote {
        margin: 4rem 0 0;
        color: #c6c4d0;
        font-size: 1rem;
        line-height: 1.5;
      }

      .nova-workflow,
      .nova-security {
        padding-block: clamp(4rem, 10vw, 8rem);
        display: grid;
        gap: 3rem;
        border-top: 1px solid var(--nova-line);
      }

      .nova-workflow ol {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .nova-workflow li {
        padding: 1.2rem 0;
        display: grid;
        grid-template-columns: 2rem 1fr;
        gap: 0.35rem 0.8rem;
        border-top: 1px solid var(--nova-line);
      }

      .nova-workflow li span { grid-row: 1 / 3; color: var(--nova-violet); font-size: 0.65rem; }
      .nova-workflow li p { margin: 0; color: var(--nova-muted); font-size: 0.8rem; }

      .nova-security > div:first-child p:not(.demo-label) {
        max-width: 34rem;
        color: var(--nova-muted);
      }

      .nova-security-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border: 1px solid var(--nova-line);
      }

      .nova-security-grid span {
        min-height: 7rem;
        display: grid;
        place-items: center;
        border: 1px solid var(--nova-line);
        font-size: 0.68rem;
        letter-spacing: 0.1em;
      }

      .nova-close {
        margin-bottom: 1rem;
        padding: clamp(3rem, 9vw, 7rem);
        border-radius: 1.4rem;
        background:
          radial-gradient(circle at 85% 15%, rgba(98, 211, 255, 0.2), transparent 35%),
          linear-gradient(135deg, #4836b8, #7a5cff 58%, #9f84ff);
        text-align: center;
      }

      .nova-close h3 {
        margin-inline: auto;
      }

      .nova-close .demo-cta {
        margin-top: 1.5rem;
      }

      .nova-footer {
        min-height: 6rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.7rem;
        border-top: 1px solid var(--nova-line);
        color: var(--nova-muted);
        font-size: 0.66rem;
      }

      .nova-footer strong { color: var(--nova-ink); }

      /* --- 08 · Aura One: producto editorial claro --- */
      .demo-aura {
        --aura-paper: #f5f4f1;
        --aura-surface: #ffffff;
        --aura-ink: #161513;
        --aura-muted: #6c6964;
        --aura-line: #d4d1ca;
        --aura-link: #0b5cad;
        min-height: 100svh;
        background: var(--aura-paper);
        color: var(--aura-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-aura {
        --aura-paper: #10100f;
        --aura-surface: #191917;
        --aura-ink: #f2f1ec;
        --aura-muted: #aaa7a0;
        --aura-line: #353430;
        --aura-link: #8ec5ff;
      }

      .aura-global,
      .aura-local {
        padding-inline: max(1rem, env(safe-area-inset-left));
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .aura-global {
        min-height: 3.2rem;
        padding-right: 7.3rem;
        background: #171715;
        color: #f7f7f2;
      }

      .aura-global strong {
        font-size: 0.78rem;
        letter-spacing: 0.18em;
      }

      .aura-global span {
        display: none;
        color: #aaa9a4;
        font-size: 0.62rem;
      }

      .aura-local {
        min-height: 4.2rem;
        position: sticky;
        top: 0;
        z-index: 20;
        padding-right: 7.3rem;
        border-bottom: 1px solid var(--aura-line);
        background: color-mix(in srgb, var(--aura-paper) 88%, transparent);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
      }

      .aura-local > strong {
        font-size: 1rem;
        letter-spacing: -0.04em;
      }

      .aura-local > div {
        display: flex;
        align-items: center;
        gap: 0.25rem;
      }

      .aura-local button,
      .aura-text-link {
        min-height: 2.5rem;
        padding-inline: 0.65rem;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-size: 0.66rem;
      }

      .aura-local button:not(.aura-retail-link) {
        display: none;
      }

      .aura-local .aura-retail-link {
        min-height: 2.75rem;
        padding-inline: 0.85rem;
        border-radius: 999px;
        background: #1670d2;
        color: white;
        font-weight: 700;
      }

      .aura-hero {
        min-height: calc(100svh - 7.4rem);
        position: relative;
        padding: clamp(4rem, 9vw, 7rem) 1rem 2rem;
        display: grid;
        align-content: start;
        overflow: hidden;
      }

      .aura-hero-copy {
        z-index: 2;
        text-align: center;
      }

      .aura-hero h2 {
        margin: 0.8rem 0 1rem;
        font-size: clamp(3.5rem, 15vw, 8.5rem);
        font-weight: 640;
        letter-spacing: -0.085em;
        line-height: 0.85;
      }

      .aura-hero-copy > p:not(.demo-label) {
        max-width: 30rem;
        margin-inline: auto;
        color: var(--aura-muted);
        font-size: 1rem;
      }

      .aura-text-link {
        margin-top: 0.8rem;
        color: var(--aura-link);
        font-size: 0.75rem;
      }

      .aura-product {
        width: min(115%, 55rem);
        min-height: 28rem;
        justify-self: center;
        margin-top: 1rem;
        background: var(--img-aura) center / contain no-repeat;
        filter: drop-shadow(0 2rem 2rem rgba(36, 31, 26, 0.13));
      }

      .aura-price {
        margin: -1rem auto 0;
        color: var(--aura-muted);
        font-size: 0.68rem;
      }

      .aura-statement,
      .aura-highlights,
      .aura-material,
      .aura-specs,
      .aura-close,
      .aura-footer {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
      }

      .aura-statement {
        padding-block: clamp(6rem, 16vw, 12rem);
        text-align: center;
      }

      .aura-statement p {
        color: var(--aura-muted);
      }

      .aura-statement h3 {
        max-width: 17ch;
        margin: 0 auto;
        font-size: clamp(2.7rem, 8vw, 6rem);
        font-weight: 580;
        letter-spacing: -0.075em;
        line-height: 0.92;
      }

      .aura-highlights {
        padding-block: 5rem;
        border-top: 1px solid var(--aura-line);
      }

      .aura-highlights > header h3,
      .aura-material h3,
      .aura-specs h3,
      .aura-close h3 {
        max-width: 13ch;
        margin: 0;
        font-size: clamp(2.8rem, 8vw, 5.5rem);
        font-weight: 570;
        letter-spacing: -0.075em;
        line-height: 0.9;
      }

      .aura-highlight-grid {
        margin-top: 3rem;
        display: grid;
        gap: 0.8rem;
      }

      .aura-highlight-grid article {
        min-height: 23rem;
        padding: 1.4rem;
        position: relative;
        overflow: hidden;
        border-radius: 1.2rem;
        background: var(--aura-surface);
      }

      .aura-highlight-grid article > span {
        color: var(--aura-muted);
        font-size: 0.7rem;
      }

      .aura-highlight-grid article > strong {
        display: block;
        margin-block: 3.5rem 0.6rem;
        font-size: clamp(4rem, 16vw, 8rem);
        font-weight: 550;
        letter-spacing: -0.09em;
        line-height: 0.8;
      }

      .aura-highlight-grid article > p {
        max-width: 22rem;
        color: var(--aura-muted);
        font-size: 0.82rem;
      }

      .aura-highlight-sound {
        background: #171714 !important;
        color: #f7f5ef;
      }

      .aura-highlight-sound > span,
      .aura-highlight-sound > p {
        color: #aaa79f !important;
      }

      .aura-wave {
        height: 6rem;
        position: absolute;
        inset: auto 1.4rem 1.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
      }

      .aura-wave i {
        width: 0.32rem;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(#d9ccff, #6f58cf);
        animation: sound-pulse 1.8s ease-in-out infinite;
      }

      .aura-wave i:nth-child(2), .aura-wave i:nth-child(6) { animation-delay: -0.3s; }
      .aura-wave i:nth-child(3), .aura-wave i:nth-child(5) { animation-delay: -0.65s; }
      .aura-wave i:nth-child(4) { animation-delay: -0.9s; }

      .aura-highlight-calm {
        background: linear-gradient(150deg, #d8d3c9, #f6f1e8) !important;
        color: #292621;
      }

      .aura-highlight-battery {
        background: #d9efcb !important;
        color: #1d2818;
      }

      .aura-material {
        padding-block: clamp(5rem, 12vw, 9rem);
        display: grid;
        gap: 2.5rem;
        align-items: center;
      }

      .aura-material-image {
        min-height: 26rem;
        border-radius: 1.2rem;
        background: var(--img-aura) center / cover no-repeat;
      }

      .aura-material > div:last-child > p:not(.demo-label) {
        max-width: 32rem;
        color: var(--aura-muted);
      }

      .aura-material ul {
        margin: 2rem 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        list-style: none;
      }

      .aura-material li {
        padding: 0.65rem 0.9rem;
        border: 1px solid var(--aura-line);
        border-radius: 999px;
        font-size: 0.7rem;
      }

      .aura-specs {
        padding-block: 5rem;
        border-top: 1px solid var(--aura-line);
      }

      .aura-specs dl {
        margin: 3rem 0 0;
      }

      .aura-specs dl div {
        padding-block: 1.2rem;
        display: grid;
        gap: 0.3rem;
        border-top: 1px solid var(--aura-line);
      }

      .aura-specs dt {
        color: var(--aura-muted);
        font-size: 0.7rem;
      }

      .aura-specs dd {
        margin: 0;
        font-size: 1rem;
      }

      .aura-retailers {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
        padding-block: clamp(5rem, 12vw, 9rem);
        border-top: 1px solid var(--aura-line);
      }

      .aura-retailers > header {
        display: grid;
        gap: 0.8rem;
      }

      .aura-retailers h3 {
        max-width: 13ch;
        margin: 0;
        font-size: clamp(2.8rem, 8vw, 5.5rem);
        font-weight: 570;
        letter-spacing: -0.075em;
        line-height: 0.9;
      }

      .aura-retailers header > p:not(.demo-label) {
        max-width: 34rem;
        color: var(--aura-muted);
      }

      .aura-retailers > div {
        margin-top: 3rem;
        display: grid;
        border-top: 1px solid var(--aura-line);
      }

      .aura-retailers article {
        padding: 1.2rem 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.35rem 1rem;
        border-bottom: 1px solid var(--aura-line);
      }

      .aura-retailers article > span,
      .aura-retailers article > small {
        color: var(--aura-muted);
        font-size: 0.75rem;
      }

      .aura-retailers article > span {
        grid-column: 1 / -1;
        text-transform: uppercase;
      }

      .aura-retailers article > strong {
        font-size: 1.25rem;
        letter-spacing: -0.035em;
      }

      .aura-retailers article > small {
        grid-column: 1;
      }

      .aura-retailers article > button,
      .elan-products article > button {
        min-height: 2.8rem;
        grid-column: 2;
        grid-row: 2 / 4;
        align-self: center;
        padding-inline: 0.9rem;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-size: 0.68rem;
        font-weight: 700;
      }

      .elan-products article > button {
        margin-top: 0.8rem;
        grid-column: auto;
        grid-row: auto;
      }

      .aura-close {
        margin-bottom: 1rem;
        padding: clamp(3rem, 10vw, 8rem);
        border-radius: 1.2rem;
        background: #171714;
        color: #f7f5ef;
        text-align: center;
      }

      .aura-close h3 {
        margin-inline: auto;
      }

      .aura-close > p:not(.demo-label) {
        color: #aaa79f;
      }

      .aura-close .demo-cta {
        background: #f7f5ef;
        color: #171714;
      }

      .aura-footer {
        min-height: 6rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        border-top: 1px solid var(--aura-line);
        color: var(--aura-muted);
        font-size: 0.65rem;
      }

      .aura-footer strong {
        color: var(--aura-ink);
        letter-spacing: 0.16em;
      }

      /* --- 09 · Gridline: plataforma modular monocromática --- */
      .demo-grid {
        --grid-bg: #fbfbf9;
        --grid-surface: #ffffff;
        --grid-ink: #0b0b0b;
        --grid-muted: #686866;
        --grid-line: #d4d4d0;
        min-height: 100svh;
        background: var(--grid-bg);
        color: var(--grid-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-grid {
        --grid-bg: #090909;
        --grid-surface: #111111;
        --grid-ink: #f3f3f0;
        --grid-muted: #999994;
        --grid-line: #30302e;
      }

      .grid-nav {
        min-height: 4.8rem;
        padding: 0.8rem 7.2rem 0.8rem 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        border-bottom: 1px solid var(--grid-line);
      }

      .grid-nav > strong {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
      }

      .grid-nav > strong span {
        font-size: 1rem;
      }

      .grid-nav .demo-inline-nav {
        margin-right: 0;
      }

      .grid-signin {
        display: none;
        min-height: 2.45rem;
        padding-inline: 0.9rem;
        border: 0;
        border-radius: 0.35rem;
        background: var(--grid-ink);
        color: var(--grid-bg);
        cursor: pointer;
        font-size: 0.7rem;
        font-weight: 700;
      }

      .grid-hero {
        min-height: calc(100svh - 4.8rem);
        position: relative;
        padding: clamp(4rem, 10vw, 8rem) max(0.75rem, calc((100% - 82rem) / 2)) 5rem;
        display: grid;
        gap: 3rem;
        overflow: hidden;
        background:
          linear-gradient(var(--grid-line) 1px, transparent 1px),
          linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
        background-size: 3rem 3rem;
      }

      .grid-hero::before {
        height: 0.1rem;
        position: absolute;
        inset: 0 0 auto;
        background: linear-gradient(90deg, transparent, var(--grid-ink), transparent);
        content: "";
        opacity: 0.35;
        animation: grid-scan 9s linear infinite;
      }

      .grid-hero-copy {
        z-index: 1;
        align-self: center;
        padding-inline: 0.75rem;
      }

      .grid-hero h2 {
        max-width: 9ch;
        margin: 1rem 0 1.4rem;
        font-size: clamp(3.8rem, 15vw, 8.7rem);
        font-weight: 650;
        letter-spacing: -0.09em;
        line-height: 0.82;
      }

      .grid-hero h2 span {
        display: block;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--grid-ink);
      }

      .grid-hero-copy > p:not(.demo-label) {
        max-width: 35rem;
        color: var(--grid-muted);
      }

      .grid-hero-copy > div {
        margin-top: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
      }

      .demo-grid .demo-cta,
      .grid-hero-copy > div > button:last-child {
        min-height: 3.1rem;
        padding-inline: 1rem;
        border: 1px solid var(--grid-ink);
        border-radius: 0.35rem;
        background: var(--grid-ink);
        color: var(--grid-bg);
        cursor: pointer;
      }

      .grid-hero-copy > div > button:last-child {
        background: var(--grid-bg);
        color: var(--grid-ink);
      }

      .grid-terminal {
        z-index: 1;
        align-self: center;
        overflow: hidden;
        border: 1px solid var(--grid-ink);
        background: var(--grid-surface);
        box-shadow: 1rem 1rem 0 color-mix(in srgb, var(--grid-ink) 10%, transparent);
      }

      .grid-terminal > header {
        min-height: 2.8rem;
        padding-inline: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--grid-line);
      }

      .grid-terminal header > span {
        display: flex;
        gap: 0.3rem;
      }

      .grid-terminal header i {
        width: 0.48rem;
        aspect-ratio: 1;
        border: 1px solid var(--grid-ink);
        border-radius: 50%;
      }

      .grid-terminal header small {
        color: var(--grid-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.58rem;
      }

      .grid-terminal pre {
        min-height: 21rem;
        margin: 0;
        padding: clamp(1.2rem, 5vw, 2.5rem);
        color: var(--grid-muted);
        font-family: ui-monospace, monospace;
        font-size: clamp(0.68rem, 2.5vw, 0.86rem);
        line-height: 2;
        white-space: pre-wrap;
      }

      .grid-terminal pre span,
      .grid-terminal pre strong,
      .grid-terminal pre em {
        color: var(--grid-ink);
        font-style: normal;
      }

      .grid-terminal pre b {
        color: #20a660;
      }

      .grid-pulse {
        min-height: 3rem;
        padding-inline: 1rem;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        border-top: 1px solid var(--grid-line);
        color: var(--grid-muted);
        font-size: 0.62rem;
      }

      .grid-pulse i {
        width: 0.55rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #20a660;
        box-shadow: 0 0 0 0.35rem color-mix(in srgb, #20a660 16%, transparent);
      }

      .grid-logos,
      .grid-platform,
      .grid-performance,
      .grid-developers,
      .grid-footer {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
      }

      .grid-logos {
        min-height: 8rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border: 1px solid var(--grid-line);
        border-bottom: 0;
      }

      .grid-logos span {
        min-height: 4rem;
        display: grid;
        place-items: center;
        border-right: 1px solid var(--grid-line);
        border-bottom: 1px solid var(--grid-line);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.1em;
      }

      .grid-platform {
        padding-block: clamp(5rem, 12vw, 9rem);
      }

      .grid-platform > header h3,
      .grid-performance h3,
      .grid-developers h3 {
        max-width: 13ch;
        margin: 0;
        font-size: clamp(2.8rem, 8vw, 5.7rem);
        font-weight: 610;
        letter-spacing: -0.08em;
        line-height: 0.88;
      }

      .grid-bento {
        margin-top: 3rem;
        display: grid;
        border-top: 1px solid var(--grid-line);
        border-left: 1px solid var(--grid-line);
      }

      .grid-bento article {
        min-height: 22rem;
        padding: 1.4rem;
        overflow: hidden;
        border-right: 1px solid var(--grid-line);
        border-bottom: 1px solid var(--grid-line);
        background: var(--grid-surface);
      }

      .grid-bento article > span {
        color: var(--grid-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
      }

      .grid-bento h4 {
        max-width: 16ch;
        margin: 1rem 0 2rem;
        font-size: clamp(1.6rem, 4.5vw, 2.4rem);
        letter-spacing: -0.055em;
        line-height: 1;
      }

      .grid-bento p {
        color: var(--grid-muted);
        font-size: 0.75rem;
      }

      .grid-world {
        min-height: 10rem;
        position: relative;
        border: 1px solid var(--grid-line);
        background:
          radial-gradient(circle, var(--grid-ink) 0.08rem, transparent 0.1rem) 0 0 / 1rem 1rem;
      }

      .grid-world::before,
      .grid-world::after {
        position: absolute;
        border: 1px solid var(--grid-ink);
        border-radius: 50%;
        content: "";
      }

      .grid-world::before { width: 8rem; aspect-ratio: 1; inset: 1rem auto auto 18%; }
      .grid-world::after { width: 4rem; aspect-ratio: 1; inset: 3rem 18% auto auto; }

      .grid-world i {
        width: 0.5rem;
        aspect-ratio: 1;
        position: absolute;
        z-index: 2;
        border-radius: 50%;
        background: var(--grid-ink);
        box-shadow: 0 0 0 0.25rem var(--grid-bg);
      }

      .grid-world i:nth-child(1) { inset: 22% auto auto 30%; }
      .grid-world i:nth-child(2) { inset: 58% auto auto 48%; }
      .grid-world i:nth-child(3) { inset: 30% 20% auto auto; }
      .grid-world i:nth-child(4) { inset: auto 34% 18% auto; }
      .grid-world i:nth-child(5) { inset: auto auto 22% 18%; }
      .grid-world i:nth-child(6) { inset: 48% 9% auto auto; }

      .grid-branches {
        display: grid;
        gap: 0.6rem;
      }

      .grid-branches i {
        padding: 0.75rem;
        border: 1px solid var(--grid-line);
        font-family: ui-monospace, monospace;
        font-size: 0.65rem;
        font-style: normal;
      }

      .grid-branches i::before {
        margin-right: 0.6rem;
        color: #20a660;
        content: "●";
      }

      .grid-spark {
        height: 10rem;
        display: flex;
        align-items: flex-end;
        gap: 0.35rem;
        border-bottom: 1px solid var(--grid-ink);
      }

      .grid-spark i {
        width: 100%;
        height: 35%;
        background: var(--grid-ink);
      }

      .grid-spark i:nth-child(2) { height: 56%; }
      .grid-spark i:nth-child(3) { height: 42%; }
      .grid-spark i:nth-child(4) { height: 77%; }
      .grid-spark i:nth-child(5) { height: 61%; }
      .grid-spark i:nth-child(6) { height: 84%; }
      .grid-spark i:nth-child(7) { height: 69%; }
      .grid-spark i:nth-child(8) { height: 92%; }

      .grid-performance {
        padding-block: clamp(5rem, 12vw, 9rem);
        display: grid;
        gap: 3rem;
        border-top: 1px solid var(--grid-line);
      }

      .grid-performance > div:first-child > p:not(.demo-label) {
        max-width: 32rem;
        color: var(--grid-muted);
      }

      .grid-score {
        padding: clamp(1.5rem, 5vw, 3rem);
        border: 1px solid var(--grid-ink);
        background: var(--grid-surface);
      }

      .grid-score > span,
      .grid-score > p {
        color: var(--grid-muted);
        font-size: 0.7rem;
      }

      .grid-score > strong {
        display: block;
        margin-block: 2rem;
        font-size: clamp(5rem, 18vw, 10rem);
        font-weight: 560;
        letter-spacing: -0.1em;
        line-height: 0.7;
      }

      .grid-score > strong small {
        margin-left: 0.2rem;
        font-size: 1rem;
        letter-spacing: 0;
      }

      .grid-score > div {
        height: 0.4rem;
        background: var(--grid-line);
      }

      .grid-score > div i {
        width: 82%;
        height: 100%;
        display: block;
        background: #20a660;
      }

      .grid-developers {
        margin-bottom: 1rem;
        padding: clamp(3rem, 10vw, 8rem);
        background: var(--grid-ink);
        color: var(--grid-bg);
        text-align: center;
      }

      .grid-developers h3,
      .grid-developers > p:not(.demo-label) {
        margin-inline: auto;
      }

      .grid-developers > p:not(.demo-label) {
        max-width: 34rem;
        opacity: 0.68;
      }

      .grid-developers .demo-cta {
        margin-top: 1rem;
        border-color: var(--grid-bg);
        background: var(--grid-bg);
        color: var(--grid-ink);
      }

      .grid-footer {
        min-height: 6rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        border-top: 1px solid var(--grid-line);
        color: var(--grid-muted);
        font-size: 0.65rem;
      }

      .grid-footer strong { color: var(--grid-ink); }

      /* --- 10 · Casa Bruma: hospitalidad inmersiva --- */
      .demo-bruma {
        --bruma-paper: #ebe8e0;
        --bruma-ink: #1e251f;
        --bruma-muted: #6b716a;
        --bruma-green: #26372c;
        --bruma-sand: #d8cbb7;
        min-height: 100svh;
        background: var(--bruma-paper);
        color: var(--bruma-ink);
        font-family: Arial, Helvetica, sans-serif;
      }

      html[data-theme='dark'] .demo-bruma {
        --bruma-paper: #131713;
        --bruma-ink: #eeeae0;
        --bruma-muted: #a9aca4;
        --bruma-green: #d5ddcf;
        --bruma-sand: #3a352e;
      }

      .bruma-hero {
        min-height: 100svh;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        isolation: isolate;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgba(12, 18, 14, 0.48), transparent 35%, rgba(12, 18, 14, 0.55)),
          var(--img-bruma-hero) center / cover no-repeat;
        color: white;
      }

      .bruma-hero::before {
        position: absolute;
        inset: -3%;
        z-index: -1;
        background: var(--img-bruma-hero) center / cover no-repeat;
        content: "";
        animation: soft-drift 22s ease-in-out infinite;
      }

      .bruma-hero::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(9, 15, 11, 0.5), transparent 36%, rgba(9, 15, 11, 0.65));
        content: "";
      }

      .bruma-nav {
        min-height: 5rem;
        padding: 1rem 7.2rem 1rem 1rem;
        display: grid;
        grid-template-columns: 2.8rem 1fr;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
      }

      .bruma-nav > strong {
        text-align: center;
        font-family: Georgia, serif;
        font-size: 0.9rem;
        letter-spacing: 0.18em;
      }

      .bruma-menu {
        width: 2.75rem;
        min-height: 2.75rem;
        aspect-ratio: 1;
        display: grid;
        place-content: center;
        gap: 0.3rem;
        border: 0;
        background: transparent;
        color: white;
        cursor: pointer;
      }

      .bruma-menu i {
        width: 1.2rem;
        height: 1px;
        display: block;
        background: currentColor;
      }

      .bruma-reserve {
        display: none;
        min-height: 2.7rem;
        padding-inline: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.7);
        background: transparent;
        color: white;
        cursor: pointer;
        font-size: 0.66rem;
        text-transform: uppercase;
      }

      .bruma-hero-copy {
        width: min(100% - 1.5rem, 82rem);
        margin: auto auto 3rem;
        text-align: center;
      }

      .bruma-hero-copy .demo-label {
        color: rgba(255, 255, 255, 0.8);
      }

      .bruma-hero h2 {
        max-width: 12ch;
        margin: 1rem auto 1.6rem;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(3.5rem, 14vw, 8.5rem);
        font-weight: 400;
        letter-spacing: -0.065em;
        line-height: 0.88;
      }

      .bruma-hero-copy button {
        min-height: 2.8rem;
        padding-inline: 0.9rem;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.7);
        background: transparent;
        color: white;
        cursor: pointer;
        font-size: 0.7rem;
      }

      .bruma-booking {
        display: grid;
        background: rgba(244, 241, 233, 0.95);
        color: #1e251f;
      }

      .bruma-booking-field,
      .bruma-booking button {
        min-height: 4.8rem;
        padding: 0.85rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 0;
        border-bottom: 1px solid #cbc5ba;
        background: transparent;
        color: inherit;
        cursor: pointer;
        text-align: left;
      }

      .bruma-booking-field {
        cursor: default;
      }

      .bruma-booking-field span,
      .bruma-booking button span {
        color: #77736b;
        font-size: 0.58rem;
        text-transform: uppercase;
      }

      .bruma-booking-field strong,
      .bruma-booking button strong {
        font-size: 0.68rem;
        font-weight: 600;
      }

      .bruma-booking .bruma-availability {
        justify-content: center;
        background: #24362a;
        color: white;
        font-size: 0.68rem;
        text-transform: uppercase;
      }

      .bruma-intro,
      .bruma-moments,
      .bruma-suites,
      .bruma-experience,
      .bruma-quote,
      .bruma-close,
      .bruma-footer {
        width: min(100% - 1.5rem, 82rem);
        margin-inline: auto;
      }

      .bruma-intro {
        padding-block: clamp(6rem, 12vw, 9rem);
        text-align: center;
      }

      .bruma-intro h3,
      .bruma-suites h3,
      .bruma-experience h3,
      .bruma-close h3 {
        max-width: 12ch;
        margin: 0 auto;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(3rem, 9vw, 6.4rem);
        font-weight: 400;
        letter-spacing: -0.065em;
        line-height: 0.9;
      }

      .bruma-intro > p:not(.demo-label) {
        max-width: 36rem;
        margin: 1.5rem auto;
        color: var(--bruma-muted);
      }

      .bruma-intro button {
        min-height: 2.6rem;
        border: 0;
        border-bottom: 1px solid currentColor;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-size: 0.7rem;
      }

      .bruma-moments {
        display: grid;
        border-block: 1px solid color-mix(in srgb, var(--bruma-ink) 22%, transparent);
      }

      .bruma-moments div {
        min-height: 8rem;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-bottom: 1px solid color-mix(in srgb, var(--bruma-ink) 22%, transparent);
      }

      .bruma-moments div:last-child { border-bottom: 0; }

      .bruma-moments strong {
        font-family: Georgia, serif;
        font-size: 2rem;
        font-weight: 400;
      }

      .bruma-moments span {
        color: var(--bruma-muted);
        font-size: 0.7rem;
      }

      .bruma-suites {
        padding-block: clamp(6rem, 14vw, 10rem);
        display: grid;
        gap: 2.5rem;
        align-items: center;
      }

      .bruma-suite-image {
        min-height: 38rem;
        padding: 1rem;
        display: flex;
        align-items: flex-end;
        background: linear-gradient(180deg, transparent 60%, rgba(14, 18, 15, 0.5)), var(--img-bruma-suite) center / cover no-repeat;
        color: white;
      }

      .bruma-suite-image span {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .bruma-suites h3 {
        margin: 0;
      }

      .bruma-suites > div:last-child > p:not(.demo-label, .bruma-rate) {
        max-width: 34rem;
        color: var(--bruma-muted);
      }

      .bruma-suites ul {
        margin: 2rem 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        list-style: none;
        border-top: 1px solid color-mix(in srgb, var(--bruma-ink) 22%, transparent);
      }

      .bruma-suites li {
        padding-block: 0.8rem;
        border-bottom: 1px solid color-mix(in srgb, var(--bruma-ink) 22%, transparent);
        color: var(--bruma-muted);
        font-size: 0.7rem;
      }

      .bruma-rate {
        font-family: Georgia, serif;
        font-size: 1.2rem;
      }

      .demo-bruma .demo-cta {
        background: var(--bruma-green);
        color: var(--bruma-paper);
      }

      .bruma-experience {
        padding-block: clamp(5rem, 12vw, 9rem);
        border-top: 1px solid color-mix(in srgb, var(--bruma-ink) 22%, transparent);
      }

      .bruma-experience h3 {
        margin: 0;
      }

      .bruma-experience > div {
        margin-top: 3rem;
        display: grid;
      }

      .bruma-experience article {
        padding: 1.2rem 0;
        border-top: 1px solid color-mix(in srgb, var(--bruma-ink) 22%, transparent);
      }

      .bruma-experience article span {
        color: var(--bruma-muted);
        font-size: 0.65rem;
      }

      .bruma-experience h4 {
        margin: 2rem 0 0.5rem;
        font-family: Georgia, serif;
        font-size: 1.8rem;
        font-weight: 400;
      }

      .bruma-experience article p {
        color: var(--bruma-muted);
        font-size: 0.8rem;
      }

      .bruma-quote {
        padding-block: clamp(6rem, 14vw, 11rem);
        text-align: center;
      }

      .bruma-quote blockquote {
        max-width: 24ch;
        margin: 0 auto 1.5rem;
        font-family: Georgia, serif;
        font-size: clamp(2.1rem, 6vw, 4.3rem);
        line-height: 1.08;
      }

      .bruma-quote cite {
        color: var(--bruma-muted);
        font-size: 0.68rem;
        font-style: normal;
      }

      .bruma-close {
        margin-bottom: 1rem;
        padding: clamp(3rem, 10vw, 7rem);
        display: grid;
        gap: 2rem;
        background: var(--bruma-green);
        color: var(--bruma-paper);
      }

      .bruma-close h3 {
        margin: 0;
      }

      .bruma-close .demo-cta {
        border-color: var(--bruma-paper);
        background: transparent;
      }

      .bruma-footer {
        min-height: 8rem;
        padding-block: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.6rem;
        border-top: 1px solid color-mix(in srgb, var(--bruma-ink) 22%, transparent);
        color: var(--bruma-muted);
        font-size: 0.65rem;
      }

      .bruma-footer strong {
        color: var(--bruma-ink);
        font-family: Georgia, serif;
        letter-spacing: 0.16em;
      }

      @media (min-width: 48rem) {
        .nova-nav,
        .grid-nav {
          padding-right: 12rem;
        }

        .nova-nav-cta,
        .grid-signin,
        .bruma-reserve {
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        .nova-hero,
        .grid-hero {
          grid-template-columns: minmax(0, 0.88fr) minmax(25rem, 1fr);
          align-items: center;
        }

        .nova-product-window {
          min-height: 35rem;
        }

        .nova-window-body {
          min-height: 32rem;
        }

        .nova-board {
          grid-template-columns: repeat(2, 1fr);
        }

        .nova-bento {
          grid-template-columns: repeat(2, 1fr);
        }

        .nova-bento-primary {
          grid-row: span 2;
        }

        .nova-workflow,
        .nova-security,
        .grid-performance {
          grid-template-columns: minmax(0, 0.8fr) 1fr;
        }

        .nova-footer,
        .aura-footer,
        .grid-footer {
          flex-wrap: nowrap;
        }

        .aura-global {
          padding-right: 12rem;
        }

        .aura-global span,
        .aura-local button:not(.aura-retail-link) {
          display: inline-flex;
        }

        .aura-local {
          padding-right: 12rem;
        }

        .aura-hero {
          min-height: calc(100svh - 7.4rem);
          grid-template-columns: minmax(20rem, 0.75fr) 1fr;
          align-content: center;
          align-items: center;
        }

        .aura-hero-copy {
          padding-left: max(1rem, calc((100vw - 82rem) / 2));
          text-align: left;
        }

        .aura-hero-copy > p:not(.demo-label) {
          margin-inline: 0;
        }

        .aura-product {
          width: 112%;
          min-height: 43rem;
          margin: 0 0 0 -9%;
        }

        .aura-price {
          position: absolute;
          inset: auto 2rem 2rem auto;
        }

        .aura-highlight-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .aura-highlight-grid article {
          min-height: 21rem;
        }

        .aura-highlight-sound {
          grid-row: span 2;
          min-height: calc(42rem + 0.8rem) !important;
        }

        .aura-material {
          grid-template-columns: minmax(25rem, 1fr) minmax(20rem, 0.78fr);
        }

        .aura-material-image {
          min-height: 34rem;
        }

        .aura-specs dl div {
          grid-template-columns: 0.55fr 1fr;
        }

        .grid-logos {
          grid-template-columns: repeat(5, 1fr);
        }

        .grid-bento {
          grid-template-columns: repeat(2, 1fr);
        }

        .grid-bento-network {
          grid-row: span 2;
        }

        .bruma-nav {
          padding-right: 12rem;
          grid-template-columns: 3rem 1fr auto;
        }

        .bruma-booking {
          width: min(calc(100% - 3rem), 70rem);
          margin: 0 auto 2rem;
          grid-template-columns: repeat(3, 1fr) auto;
          box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
        }

        .bruma-booking-field,
        .bruma-booking button {
          min-height: 5.2rem;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          border-right: 1px solid #cbc5ba;
          border-bottom: 0;
        }

        .bruma-booking .bruma-availability {
          min-width: 12rem;
          align-items: center;
        }

        .bruma-moments,
        .bruma-experience > div {
          grid-template-columns: repeat(3, 1fr);
        }

        .bruma-moments div {
          border-right: 1px solid color-mix(in srgb, var(--bruma-ink) 22%, transparent);
          border-bottom: 0;
        }

        .bruma-suites {
          grid-template-columns: minmax(27rem, 1fr) minmax(21rem, 0.78fr);
        }

        .bruma-experience article {
          padding-inline: 1rem;
          border-left: 1px solid color-mix(in srgb, var(--bruma-ink) 22%, transparent);
        }

        .bruma-experience article:first-child { border-left: 0; }

        .bruma-close {
          grid-template-columns: 1fr auto;
          align-items: end;
        }

        .bruma-footer {
          min-height: 7rem;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
        }
      }

      @media (max-width: 47.99rem) {
        .nova-nav .demo-inline-nav button:nth-child(n + 3),
        .grid-nav .demo-inline-nav button:nth-child(n + 3) {
          display: none;
        }

        .nova-product-window {
          margin-inline: -0.25rem;
        }

        .nova-metrics article:nth-child(3) {
          display: none;
        }

        .nova-metrics {
          grid-template-columns: repeat(2, 1fr);
        }

        .nova-board section:nth-child(2) {
          display: none;
        }

        .aura-local > div button:nth-child(-n + 2) {
          display: none;
        }

        .grid-nav .demo-inline-nav,
        .nova-nav .demo-inline-nav {
          width: auto;
        }

        .bruma-hero-copy {
          margin-bottom: 2rem;
        }
      }

      /* --- Refinamiento de contraste y movimiento distintivo --- */
      .blanc-copy .demo-cta {
        border-color: var(--blanc-ink);
        background: var(--blanc-ink);
        color: var(--blanc-paper);
      }

      .blanc-booking .demo-cta {
        border-color: var(--blanc-paper);
        background: var(--blanc-paper);
        color: var(--blanc-ink);
      }

      .marina-hero .demo-cta,
      .marina-visit .demo-cta {
        border-color: var(--marina-green);
        background: var(--marina-green);
        color: #fff1d5;
      }

      .habitat-contact .demo-cta {
        border-color: var(--habitat-paper);
        background: var(--habitat-paper);
        color: var(--habitat-ink);
      }

      .elan-manifesto .demo-cta,
      .elan-newsletter .demo-cta {
        border-color: var(--elan-ink);
        background: var(--elan-ink);
        color: var(--elan-paper);
      }

      .archive-copy .demo-cta {
        border-color: var(--archive-blue);
        background: var(--archive-blue);
        color: #fff;
        box-shadow: 0 0.8rem 2.2rem color-mix(in srgb, var(--archive-blue) 24%, transparent);
      }

      .archive-packages .demo-cta {
        border-color: #fff;
        background: #fff;
        color: #29345f;
      }

      .lead-dialog > .demo-cta {
        border-color: var(--ink);
        background: var(--ink);
        color: var(--paper);
      }

      .aura-local {
        color: var(--aura-ink);
      }

      .concept-open {
        color: var(--ink);
        transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
      }

      .concept-open:hover,
      .concept-open:focus-visible {
        border-color: var(--ink);
        background: var(--ink);
        color: var(--paper);
      }

      @keyframes blanc-light-pass {
        0%, 18% { transform: translate3d(-58%, -18%, 0) rotate(18deg); opacity: 0; }
        38%, 62% { opacity: 0.55; }
        82%, 100% { transform: translate3d(58%, 18%, 0) rotate(18deg); opacity: 0; }
      }

      @keyframes method-scan-pass {
        0%, 12% { transform: translate3d(-115%, 0, 0); opacity: 0; }
        28%, 68% { opacity: 0.48; }
        86%, 100% { transform: translate3d(115%, 0, 0); opacity: 0; }
      }

      @keyframes marina-tide {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); border-radius: 50% 44% 52% 46%; }
        50% { transform: translate3d(-1.2rem, 1rem, 0) rotate(4deg); border-radius: 43% 57% 45% 55%; }
      }

      @keyframes habitat-sun-pass {
        0%, 12% { transform: translate3d(-70%, 0, 0) rotate(8deg); opacity: 0; }
        35%, 62% { opacity: 0.42; }
        88%, 100% { transform: translate3d(70%, 0, 0) rotate(8deg); opacity: 0; }
      }

      @keyframes elan-ambient {
        0%, 100% { transform: translate3d(-4%, 2%, 0) scale(0.92); opacity: 0.42; }
        50% { transform: translate3d(10%, -7%, 0) scale(1.08); opacity: 0.72; }
      }

      @keyframes elan-marquee {
        from { transform: translate3d(0, 0, 0); }
        to { transform: translate3d(-50%, 0, 0); }
      }

      @keyframes archive-orbit {
        0%, 100% { transform: translate3d(-6%, 4%, 0) rotate(-8deg); }
        50% { transform: translate3d(10%, -8%, 0) rotate(9deg); }
      }

      @keyframes archive-line-draw {
        0%, 16% { transform: scaleX(0); transform-origin: left; opacity: 0; }
        38%, 72% { transform: scaleX(1); transform-origin: left; opacity: 0.7; }
        100% { transform: scaleX(0); transform-origin: right; opacity: 0; }
      }

      @keyframes nova-aurora {
        0%, 100% { transform: translate3d(-8%, 0, 0) scale(0.9); opacity: 0.16; }
        50% { transform: translate3d(10%, -5%, 0) scale(1.1); opacity: 0.34; }
      }

      @keyframes aura-float {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.35deg); }
        50% { transform: translate3d(0, -0.8rem, 0) rotate(0.35deg); }
      }

      @keyframes aura-halo {
        0%, 100% { transform: translate3d(-5%, 3%, 0) scale(0.92); opacity: 0.42; }
        50% { transform: translate3d(7%, -4%, 0) scale(1.08); opacity: 0.72; }
      }

      @keyframes grid-signal-pass {
        0%, 12% { transform: translate3d(-120%, 0, 0); opacity: 0; }
        32%, 68% { opacity: 0.55; }
        88%, 100% { transform: translate3d(120%, 0, 0); opacity: 0; }
      }

      @keyframes grid-caret-blink {
        0%, 44% { opacity: 1; }
        45%, 100% { opacity: 0; }
      }

      @keyframes bruma-breathe {
        0%, 100% { opacity: 0.78; }
        50% { opacity: 0.96; }
      }

      @keyframes bruma-mist-pass {
        0%, 100% { transform: translate3d(-14%, 0, 0) scaleX(1.05); opacity: 0.08; }
        50% { transform: translate3d(14%, -0.5rem, 0) scaleX(1.14); opacity: 0.22; }
      }

      .blanc-portrait::after {
        display: block;
        inset: -45%;
        background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 224, 0.72) 49%, transparent 60%);
        content: "";
        mix-blend-mode: soft-light;
        pointer-events: none;
        animation: blanc-light-pass 10s ease-in-out infinite;
      }

      .method-photo {
        position: relative;
        isolation: isolate;
        overflow: hidden;
      }

      .method-photo::after {
        width: 42%;
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 1;
        background: linear-gradient(90deg, transparent, rgba(223, 255, 85, 0.76), transparent);
        content: "";
        mix-blend-mode: screen;
        pointer-events: none;
        animation: method-scan-pass 7.5s steps(18, end) infinite;
      }

      .method-board {
        position: relative;
        overflow: hidden;
      }

      .method-board::after {
        height: 0.2rem;
        position: absolute;
        inset: 0 0 auto;
        background: var(--method-ink);
        content: "";
        transform-origin: left;
        animation: archive-line-draw 6s steps(12, end) infinite;
      }

      .marina-hero::before {
        animation: marina-tide 13s ease-in-out infinite;
      }

      .marina-hero::after {
        animation: marina-tide 17s ease-in-out -5s infinite reverse;
      }

      .habitat-building::after {
        display: block;
        inset: -30%;
        background: linear-gradient(102deg, transparent 39%, rgba(255, 238, 194, 0.64) 49%, transparent 58%);
        content: "";
        mix-blend-mode: soft-light;
        pointer-events: none;
        animation: habitat-sun-pass 13s ease-in-out infinite;
      }

      .elan-hero {
        isolation: isolate;
      }

      .elan-hero::before {
        width: clamp(22rem, 58vw, 52rem);
        aspect-ratio: 1;
        position: absolute;
        inset: 2% -18% auto auto;
        z-index: -1;
        border-radius: 46% 54% 60% 40%;
        background: radial-gradient(circle at 42% 42%, color-mix(in srgb, var(--elan-accent) 68%, transparent), transparent 68%);
        content: "";
        pointer-events: none;
        animation: elan-ambient 16s ease-in-out infinite;
      }

      .elan-heading::after {
        width: max-content;
        display: block;
        margin-top: 2rem;
        color: color-mix(in srgb, var(--elan-ink) 38%, transparent);
        content: "EDITION 01  ·  TRACEABLE FIBRES  ·  SMALL SERIES  ·  EDITION 01  ·  TRACEABLE FIBRES  ·  SMALL SERIES  ·  ";
        font-family: ui-monospace, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.16em;
        white-space: nowrap;
        animation: elan-marquee 24s linear infinite;
      }

      .archive-hero {
        position: relative;
        isolation: isolate;
      }

      .archive-hero::before,
      .archive-hero::after {
        position: absolute;
        z-index: -1;
        border: 1px solid color-mix(in srgb, var(--archive-blue) 24%, transparent);
        content: "";
        pointer-events: none;
      }

      .archive-hero::before {
        width: clamp(14rem, 36vw, 32rem);
        aspect-ratio: 1;
        inset: 4% auto auto -14%;
        border-radius: 42% 58% 65% 35%;
        background: color-mix(in srgb, var(--archive-peach) 16%, transparent);
        animation: archive-orbit 17s ease-in-out infinite;
      }

      .archive-hero::after {
        width: clamp(8rem, 20vw, 18rem);
        aspect-ratio: 1;
        inset: auto 4% 8% auto;
        border-radius: 50%;
        box-shadow: inset 0 0 0 2rem color-mix(in srgb, var(--archive-blue) 5%, transparent);
        animation: archive-orbit 12s ease-in-out -4s infinite reverse;
      }

      .archive-window-body::after {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--archive-blue), transparent);
        content: "";
        animation: archive-line-draw 5.5s ease-in-out infinite;
      }

      .nova-product-window {
        position: relative;
        isolation: isolate;
      }

      .nova-product-window::after {
        width: 70%;
        aspect-ratio: 1;
        position: absolute;
        inset: -48% -20% auto auto;
        z-index: -1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(120, 93, 255, 0.48), transparent 68%);
        content: "";
        pointer-events: none;
        animation: nova-aurora 12s ease-in-out infinite;
      }

      .aura-hero {
        isolation: isolate;
      }

      .aura-hero::before {
        width: clamp(22rem, 54vw, 52rem);
        aspect-ratio: 1;
        position: absolute;
        inset: 18% -10% auto auto;
        z-index: -1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(198, 181, 242, 0.34), transparent 68%);
        content: "";
        pointer-events: none;
        animation: aura-halo 15s ease-in-out infinite;
      }

      .aura-product {
        animation: aura-float 8s ease-in-out infinite;
      }

      .grid-terminal {
        position: relative;
      }

      .grid-terminal::after {
        height: 0.12rem;
        position: absolute;
        inset: 2.8rem 0 auto;
        background: linear-gradient(90deg, transparent, #20a660, transparent);
        content: "";
        pointer-events: none;
        animation: grid-signal-pass 6.5s ease-in-out infinite;
      }

      .grid-terminal pre::after {
        width: 0.5rem;
        height: 1em;
        display: inline-block;
        margin-left: 0.35rem;
        background: currentColor;
        content: "";
        vertical-align: -0.1em;
        animation: grid-caret-blink 1s steps(1, end) infinite;
      }

      .bruma-hero::after {
        animation: bruma-breathe 9s ease-in-out infinite;
      }

      .bruma-hero-copy::before {
        width: 118%;
        height: 8rem;
        position: absolute;
        inset: 12% auto auto -9%;
        z-index: -1;
        border-radius: 50%;
        background: linear-gradient(90deg, transparent, rgba(234, 238, 230, 0.48), transparent);
        content: "";
        filter: blur(1.5rem);
        pointer-events: none;
        animation: bruma-mist-pass 14s ease-in-out infinite;
      }

      .bruma-hero-copy {
        position: relative;
        isolation: isolate;
      }

      .bruma-suite-image {
        position: relative;
        isolation: isolate;
        overflow: hidden;
      }

      .bruma-suite-image::after {
        width: 55%;
        position: absolute;
        inset: -20% auto -20% -60%;
        z-index: -1;
        background: linear-gradient(100deg, transparent, rgba(255, 240, 205, 0.42), transparent);
        content: "";
        pointer-events: none;
        animation: method-scan-pass 11s ease-in-out infinite;
      }

      @media (min-width: 48rem) {
        .archive-bento article {
          min-height: 17rem;
          padding: 1.4rem;
          display: flex;
          flex-direction: column;
          border-right: 1px solid color-mix(in srgb, var(--archive-blue) 24%, transparent);
          border-bottom: 0;
        }

        .archive-bento article:last-child {
          border-right: 0;
        }

        .archive-bento span {
          grid-row: auto;
        }

        .archive-bento h3 {
          margin-top: auto;
        }

        .aura-retailers > header {
          grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr);
          align-items: end;
        }

        .aura-retailers header > p:not(.demo-label) {
          grid-column: 2;
          grid-row: 1 / 3;
        }
      }

      html.motion-managed [data-motion-zone]:not(.is-motion-active),
      html.motion-managed [data-motion-zone]:not(.is-motion-active)::before,
      html.motion-managed [data-motion-zone]:not(.is-motion-active)::after,
      html.motion-managed [data-motion-zone]:not(.is-motion-active) *,
      html.motion-managed [data-motion-zone]:not(.is-motion-active) *::before,
      html.motion-managed [data-motion-zone]:not(.is-motion-active) *::after {
        animation-play-state: paused !important;
      }

      .aura-wave i {
        animation-iteration-count: 3;
        animation-fill-mode: both;
      }

      .blanc-hero::before {
        animation: none;
      }

      .nova-hero::after,
      .grid-hero::before {
        display: none;
      }

      .bruma-hero {
        background: #28322c;
      }

      @keyframes method-enter-snap {
        from { opacity: 0; transform: translate3d(-1.1rem, 0, 0); }
        to { opacity: 1; transform: none; }
      }

      @keyframes marina-plate-enter {
        from { opacity: 0; transform: rotate(-5deg) scale(0.9); }
        to { opacity: 1; transform: none; }
      }

      @keyframes habitat-camera-settle {
        from { opacity: 0.5; transform: scale(1.045); }
        to { opacity: 1; transform: scale(1); }
      }

      @keyframes elan-slide-enter {
        from { opacity: 0; transform: translate3d(2rem, 0, 0); }
        to { opacity: 1; transform: none; }
      }

      @keyframes archive-layer-enter {
        from { opacity: 0; transform: translate3d(0, 1.4rem, 0) scale(0.96); }
        to { opacity: 1; transform: none; }
      }

      @keyframes terminal-deploy-enter {
        from { opacity: 0; transform: translate3d(1.6rem, 0, 0); }
        to { opacity: 1; transform: none; }
      }

      @keyframes cinematic-enter {
        from { opacity: 0; transform: translate3d(0, 1rem, 0) scale(1.03); }
        to { opacity: 1; transform: none; }
      }

      @keyframes carousel-card-focus {
        from { opacity: 0.72; transform: scale(0.985); }
        to { opacity: 1; transform: scale(1); }
      }

      @keyframes method-panel-switch {
        from { opacity: 0; transform: translate3d(0.85rem, 0, 0); }
        to { opacity: 1; transform: none; }
      }

      @keyframes marina-filter-in {
        from { opacity: 0; transform: translate3d(0, 0.45rem, 0); }
        to { opacity: 1; transform: none; }
      }

      .carousel-slide.is-carousel-active {
        animation: carousel-card-focus 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .method-panel.is-switching {
        animation: method-panel-switch 420ms steps(10, end) both;
      }

      .marina-dishes article.is-filtering {
        animation: marina-filter-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .demo-method.is-entering [data-enter] {
        animation-name: method-enter-snap;
        animation-timing-function: steps(10, end);
      }

      .demo-marina.is-entering .marina-plate[data-enter] {
        animation-name: marina-plate-enter;
        animation-duration: 1000ms;
      }

      .demo-habitat.is-entering .habitat-building[data-enter] {
        animation-name: habitat-camera-settle;
        animation-duration: 1500ms;
      }

      .demo-elan.is-entering .elan-lookbook[data-enter],
      .demo-nova.is-entering .nova-product-window[data-enter] {
        animation-name: elan-slide-enter;
        animation-duration: 1050ms;
      }

      .demo-archive.is-entering .archive-visual[data-enter],
      .demo-aura.is-entering .aura-product[data-enter] {
        animation-name: archive-layer-enter;
        animation-duration: 1200ms;
      }

      .demo-grid.is-entering .grid-terminal[data-enter] {
        animation-name: terminal-deploy-enter;
        animation-duration: 900ms;
      }

      .demo-bruma.is-entering .bruma-hero-copy[data-enter] {
        animation-name: cinematic-enter;
        animation-duration: 1500ms;
      }

      /* --- Portada Dianet y refuerzo visual de conceptos --- */
      :root {
        --img-dianet-home: url("/assets/images/dianet-home.webp");
        --img-nova-ambient: url("/assets/images/nova-ambient.webp");
        --img-grid-infrastructure: url("/assets/images/grid-infrastructure.webp");
        --img-archive-case: url("/assets/images/archive-case.webp");
      }

      :root {
        --img-cobalto-hero: url("/assets/images/cobalto-hero.webp");
        --img-cobalto-suite: url("/assets/images/cobalto-suite.webp");
        --img-cobalto-pool: url("/assets/images/cobalto-pool.webp");
        --img-cobalto-dining: url("/assets/images/cobalto-dining.webp");
      }

      .home-hero {
        position: relative;
        padding-block: clamp(3.2rem, 10vw, 6.5rem) clamp(3rem, 8vw, 5.5rem);
        display: grid;
        gap: clamp(2.4rem, 7vw, 4.5rem);
        align-items: center;
        overflow: hidden;
        overflow: clip;
        isolation: isolate;
      }

      .home-hero::before {
        width: clamp(18rem, 58vw, 52rem);
        aspect-ratio: 1;
        position: absolute;
        inset: 5% -12% auto auto;
        z-index: -1;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 67%);
        content: "";
        filter: blur(0.3rem);
        pointer-events: none;
        animation: home-ambient-drift 18s ease-in-out infinite;
      }

      .home-hero-message {
        z-index: 1;
      }

      .home-hero h1 {
        max-width: 11.5ch;
        margin-bottom: 1.6rem;
        font-size: clamp(3rem, 13vw, 5.9rem);
        line-height: 0.9;
      }

      .home-hero h1 em {
        display: block;
        margin-top: 0.13em;
        font-size: 0.72em;
        letter-spacing: -0.055em;
        line-height: 0.97;
      }

      .home-hero .hero-copy {
        max-width: 35rem;
        font-size: clamp(1rem, 2.8vw, 1.15rem);
      }

      .home-hero .hero-actions {
        margin-top: 1.8rem;
      }

      .home-hero-note {
        margin: 1.3rem 0 0;
        color: var(--muted);
        font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
        font-size: 0.66rem;
        letter-spacing: 0.04em;
        line-height: 1.65;
        text-transform: uppercase;
      }

      .home-showcase {
        min-height: 22rem;
        position: relative;
        overflow: hidden;
        overflow: clip;
        border: 1px solid var(--line);
        border-radius: clamp(1.15rem, 3vw, 2rem);
        background: var(--surface);
        box-shadow: var(--shadow);
      }

      .home-showcase-toolbar {
        height: 2.7rem;
        padding-inline: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
      }

      .home-showcase-toolbar > span {
        display: flex;
        gap: 0.32rem;
      }

      .home-showcase-toolbar i {
        width: 0.45rem;
        aspect-ratio: 1;
        display: block;
        border-radius: 50%;
        background: color-mix(in srgb, var(--ink) 24%, transparent);
      }

      .home-showcase-toolbar small {
        font-family: ui-monospace, monospace;
        font-size: 0.58rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .home-showcase-image {
        position: absolute;
        inset: 2.7rem 0 0;
        background:
          linear-gradient(180deg, transparent 62%, rgba(17, 17, 15, 0.18)),
          var(--img-dianet-home) 52% 50% / cover no-repeat;
        transform: scale(1.015);
        animation: home-image-breathe 14s ease-in-out infinite;
      }

      .home-showcase-caption {
        position: absolute;
        inset: auto 0.8rem 0.8rem auto;
        padding: 0.72rem 0.85rem;
        display: grid;
        gap: 0.12rem;
        border: 1px solid rgba(255, 255, 255, 0.42);
        border-radius: 0.9rem;
        background: rgba(17, 17, 15, 0.78);
        color: white;
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.16);
        backdrop-filter: blur(0.6rem);
      }

      .home-showcase-caption strong {
        font-size: 0.78rem;
      }

      .home-showcase-caption span {
        opacity: 0.68;
        font-family: ui-monospace, monospace;
        font-size: 0.58rem;
        text-transform: uppercase;
      }

      .home-proof {
        margin-bottom: clamp(4rem, 10vw, 7rem);
        padding-block: 0.45rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-block: 1px solid var(--line);
      }

      .home-proof span {
        min-height: 3.2rem;
        padding: 0.75rem 0.4rem;
        display: flex;
        align-items: center;
        color: var(--muted);
        font-family: ui-monospace, monospace;
        font-size: 0.66rem;
        line-height: 1.35;
        text-transform: uppercase;
      }

      #promesa,
      #proceso,
      #contacto {
        scroll-margin-top: 5.5rem;
      }

      .promise-band {
        margin-bottom: clamp(4rem, 9vw, 6.5rem);
      }

      .promise-points p {
        font-size: 0.84rem;
        line-height: 1.55;
      }

      .home-process {
        margin-bottom: clamp(4rem, 10vw, 8rem);
        padding-block: clamp(3rem, 8vw, 6rem);
        display: grid;
        gap: 2.5rem;
        border-block: 1px solid var(--line);
      }

      .home-process h2,
      .home-close h2 {
        max-width: 12ch;
        margin: 0;
        font-size: clamp(2.6rem, 8vw, 5.6rem);
        font-weight: 560;
        letter-spacing: -0.07em;
        line-height: 0.92;
      }

      .home-process ol {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .home-process li {
        padding-block: 1.35rem;
        display: grid;
        grid-template-columns: 2rem 1fr;
        gap: 1rem;
        border-top: 1px solid var(--line);
      }

      .home-process li > span {
        color: var(--muted);
        font-family: ui-monospace, monospace;
        font-size: 0.66rem;
      }

      .home-process li strong {
        font-size: 1.05rem;
      }

      .home-process li p {
        max-width: 30rem;
        margin: 0.45rem 0 0;
        color: var(--muted);
        font-size: 0.86rem;
      }

      .home-close {
        position: relative;
        margin-bottom: clamp(4rem, 10vw, 7rem);
        padding: clamp(2rem, 8vw, 6rem);
        overflow: hidden;
        overflow: clip;
        border-radius: clamp(1.2rem, 4vw, 2.5rem);
        background: var(--ink);
        color: var(--paper);
        isolation: isolate;
      }

      .home-close::after {
        width: clamp(18rem, 45vw, 36rem);
        aspect-ratio: 1;
        position: absolute;
        inset: auto -12% -80% auto;
        z-index: -1;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 72%, transparent), transparent 67%);
        content: "";
        animation: home-close-glow 13s ease-in-out infinite;
      }

      .home-close .kicker {
        color: color-mix(in srgb, var(--paper) 64%, transparent);
      }

      .home-close > p:not(.kicker) {
        max-width: 38rem;
        margin: 1.4rem 0 1.8rem;
        color: color-mix(in srgb, var(--paper) 68%, transparent);
      }

      .home-close .button.primary {
        border-color: var(--paper);
        background: var(--paper);
        color: var(--ink);
      }

      .contact-layout {
        display: grid;
        gap: clamp(2rem, 5vw, 4rem);
      }

      .contact-intro {
        align-self: center;
      }

      .contact-intro > p:not(.kicker) {
        max-width: 36rem;
        margin: 1.4rem 0 1.8rem;
        color: color-mix(in srgb, var(--paper) 68%, transparent);
      }

      .contact-channels {
        display: grid;
        gap: 0.65rem;
      }

      .contact-channel {
        min-height: 5.25rem;
        padding: 0.85rem;
        display: grid;
        grid-template-columns: 2.8rem minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.8rem;
        border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
        border-radius: 1rem;
        background: color-mix(in srgb, var(--paper) 7%, transparent);
        color: var(--paper);
        text-decoration: none;
        transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
      }

      .contact-channel:hover {
        border-color: color-mix(in srgb, var(--paper) 54%, transparent);
        background: color-mix(in srgb, var(--paper) 12%, transparent);
        transform: translateY(-0.12rem);
      }

      .contact-channel:focus-visible {
        outline: 2px solid var(--paper);
        outline-offset: 0.2rem;
      }

      .contact-channel-icon {
        width: 2.8rem;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: color-mix(in srgb, var(--paper) 12%, transparent);
      }

      .contact-channel-icon svg {
        width: 1.25rem;
        height: 1.25rem;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.7;
      }

      .contact-channel-copy {
        min-width: 0;
        display: grid;
        gap: 0.18rem;
      }

      .contact-channel-copy strong {
        font-size: 0.88rem;
      }

      .contact-channel-copy small {
        overflow: hidden;
        color: color-mix(in srgb, var(--paper) 58%, transparent);
        font-size: 0.7rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .contact-channel-arrow {
        color: color-mix(in srgb, var(--paper) 54%, transparent);
        font-size: 1rem;
      }

      .contact-channel.is-primary {
        border-color: var(--paper);
        background: var(--paper);
        color: var(--ink);
      }

      .contact-channel.is-primary .contact-channel-icon {
        background: #dfffe8;
        color: #087a39;
      }

      .contact-channel.is-primary .contact-channel-copy small,
      .contact-channel.is-primary .contact-channel-arrow {
        color: color-mix(in srgb, var(--ink) 58%, transparent);
      }

      .footer {
        display: grid;
        gap: 0.7rem;
      }

      .footer strong {
        color: var(--ink);
        font-size: 0.9rem;
      }

      .footer p {
        max-width: 42rem;
        margin: 0;
      }

      .footer nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
      }

      .footer a {
        color: var(--ink);
        text-decoration: underline;
        text-decoration-color: var(--line);
        text-underline-offset: 0.25rem;
      }

      .footer-links {
        display: grid;
        gap: 0.7rem;
      }

      .footer-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .footer-socials a {
        min-height: 2.5rem;
        padding: 0.65rem 0.8rem;
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        text-decoration: none;
      }

      .footer-socials a:hover {
        border-color: var(--ink);
      }

      .visual-nova {
        background:
          linear-gradient(180deg, rgba(5, 7, 18, 0.02), rgba(5, 7, 18, 0.58)),
          var(--img-nova-ambient) 68% 50% / cover no-repeat,
          #080912;
      }

      .visual-nova::before {
        background: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px), rgba(10, 11, 23, 0.36);
      }

      .visual-grid {
        background:
          linear-gradient(180deg, transparent 35%, rgba(5, 8, 6, 0.76)),
          var(--img-grid-infrastructure) center / cover no-repeat,
          #111;
        color: #fff;
      }

      .visual-grid-mark {
        display: none;
      }

      .visual-grid > span {
        text-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.9);
      }

      .archive-case-media {
        margin: 2.5rem 0 1rem;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--archive-blue) 20%, transparent);
        border-radius: 1.3rem;
        background: var(--archive-surface);
      }

      .archive-case-media > div {
        aspect-ratio: 4 / 3;
        background:
          linear-gradient(180deg, transparent 72%, rgba(39, 47, 92, 0.18)),
          var(--img-archive-case) 50% 48% / cover no-repeat;
      }

      .archive-case-media figcaption {
        min-height: 3.5rem;
        padding: 0.8rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        color: var(--archive-muted);
        font-family: ui-monospace, monospace;
        font-size: 0.64rem;
        text-transform: uppercase;
      }

      .archive-case-media small {
        font-size: inherit;
      }

      .archive-work article > strong {
        font-size: clamp(2.5rem, 11vw, 4rem);
        line-height: 0.9;
      }

      .nova-hero {
        overflow: hidden;
        overflow: clip;
      }

      .nova-ambient {
        position: absolute;
        inset: -8% -11vw 1%;
        z-index: -2;
        background:
          linear-gradient(90deg, rgba(6, 7, 15, 0.9) 0%, rgba(6, 7, 15, 0.35) 45%, rgba(6, 7, 15, 0.08) 100%),
          var(--img-nova-ambient) 68% 50% / cover no-repeat;
        opacity: 0.58;
        filter: saturate(1.08) contrast(1.04);
        pointer-events: none;
        transform: scale(1.05);
        animation: nova-ambient-shift 16s ease-in-out infinite;
      }

      .nova-ambient::after {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 70% 55%, rgba(114, 91, 255, 0.2), transparent 36%),
          linear-gradient(180deg, rgba(6, 7, 15, 0.1), var(--nova-bg) 98%);
        content: "";
      }

      .nova-hero::before {
        display: none;
      }

      .nova-proof span {
        line-height: 1.5;
      }

      .grid-world {
        min-height: 13rem;
        overflow: hidden;
        background:
          linear-gradient(180deg, transparent 40%, rgba(6, 10, 8, 0.52)),
          var(--img-grid-infrastructure) 46% 50% / cover no-repeat,
          #111;
      }

      .grid-world::before,
      .grid-world::after {
        display: none;
      }

      .grid-world i {
        background: #45df8b;
        box-shadow: 0 0 0 0.24rem rgba(8, 15, 11, 0.72), 0 0 1rem rgba(69, 223, 139, 0.8);
        animation: grid-node-pulse 3.8s ease-in-out infinite;
      }

      .grid-world i:nth-child(2n) {
        animation-delay: -1.7s;
      }

      .grid-hero {
        animation: grid-grid-drift 18s linear infinite;
      }

      .grid-hero::before {
        display: block;
        opacity: 0.16;
        animation: gridline-sweep 13s ease-in-out infinite;
      }

      .concept-open,
      .demo-inline-nav button,
      .nova-actions > button:last-child,
      .aura-text-link,
      .bruma-intro button,
      .bruma-reserve,
      .grid-signin,
      .nova-nav-cta {
        min-height: 2.75rem;
      }

      .demo-inline-nav button {
        padding-block: 0.65rem;
        font-size: 0.75rem;
      }

      .aura-price,
      .bruma-booking-field span,
      .bruma-booking-field strong,
      .archive-bento span,
      .grid-terminal pre,
      .grid-pulse {
        font-size: max(0.72rem, 11px);
      }

      @media (min-width: 44rem) {
        .home-proof {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .home-proof span {
          justify-content: center;
          text-align: center;
          border-left: 1px solid var(--line);
        }

        .home-proof span:first-child {
          border-left: 0;
        }

        .promise-points li,
        .promise-points li:first-child {
          min-height: 8.75rem;
        }

        .home-process {
          grid-template-columns: minmax(18rem, 0.8fr) 1fr;
          align-items: start;
        }

        .contact-layout {
          grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1.1fr);
          align-items: center;
        }

        .contact-channels {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .footer {
          grid-template-columns: auto minmax(18rem, 1fr) minmax(18rem, auto);
          align-items: start;
        }

        .archive-case-media > div {
          aspect-ratio: 16 / 8;
        }
      }

      @media (min-width: 60rem) {
        .home-hero {
          min-height: min(48rem, calc(100svh - 4.6rem));
          grid-template-columns: minmax(0, 0.88fr) minmax(30rem, 1.12fr);
          gap: clamp(3rem, 6vw, 6rem);
        }

        .home-hero h1 {
          font-size: clamp(4.4rem, 6.9vw, 6.4rem);
        }

        .home-showcase {
          min-height: clamp(32rem, 46vw, 39rem);
        }
      }

      @media (max-width: 30rem) {
        .home-hero .hero-actions > .button,
        .home-close .button {
          width: 100%;
        }

        .contact-channel {
          min-height: 4.8rem;
        }

        .home-showcase {
          min-height: 20rem;
        }

        .home-proof span:nth-child(even) {
          padding-left: 0.75rem;
          border-left: 1px solid var(--line);
        }

        .catalog-hint {
          align-items: flex-start;
          flex-direction: column;
        }

        .archive-case-media figcaption {
          align-items: flex-start;
          flex-direction: column;
          gap: 0.25rem;
        }
      }

      @keyframes home-ambient-drift {
        0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); opacity: 0.58; }
        50% { transform: translate3d(-1.2rem, 0.7rem, 0) scale(1.05); opacity: 0.82; }
      }

      @keyframes home-image-breathe {
        0%, 100% { transform: scale(1.015) translate3d(0, 0, 0); }
        50% { transform: scale(1.045) translate3d(-0.35%, -0.25%, 0); }
      }

      @keyframes home-close-glow {
        0%, 100% { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0.38; }
        50% { transform: translate3d(-1.8rem, -0.7rem, 0) scale(1.08); opacity: 0.68; }
      }

      @keyframes nova-ambient-shift {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.48; }
        50% { transform: translate3d(-1.8%, -1.2%, 0) scale(1.1); opacity: 0.68; }
      }

      @keyframes grid-grid-drift {
        from { background-position: 0 0, 0 0; }
        to { background-position: 3rem 3rem, 3rem 3rem; }
      }

      @keyframes gridline-sweep {
        0%, 12% { transform: translateY(-1rem); opacity: 0; }
        25% { opacity: 0.16; }
        80% { opacity: 0.16; }
        100% { transform: translateY(100svh); opacity: 0; }
      }

      @keyframes grid-node-pulse {
        0%, 100% { transform: scale(0.8); opacity: 0.48; }
        50% { transform: scale(1.15); opacity: 1; }
      }

      @media (prefers-reduced-motion: reduce) {
        html.reveal-ready [data-reveal] {
          opacity: 1;
          transform: none;
        }

        .demo-view [data-ambient]::before,
        .demo-view [data-ambient]::after,
        .aura-wave i,
        .aura-product,
        .blanc-hero::before,
        .blanc-portrait::after,
        .method-photo::after,
        .method-board::after,
        .marina-hero::before,
        .marina-hero::after,
        .habitat-building::after,
        .elan-hero::before,
        .elan-heading::after,
        .archive-hero::before,
        .archive-hero::after,
        .archive-window-body::after,
        .nova-product-window::after,
        .aura-hero::before,
        .grid-hero::before,
        .grid-terminal::after,
        .grid-terminal pre::after,
        .bruma-hero::after,
        .bruma-hero-copy::before,
        .bruma-suite-image::after,
        .visual-cobalto::before,
        .cobalto-hero::before,
        .cobalto-hero-visual::after,
        .cobalto-sun,
        .cobalto-pool-image::after,
        .cobalto-map-point::before {
          animation: none !important;
        }
      }
    

/* Dianet Devs: portada modular y páginas de demostración independientes */
:root {
  --page: min(calc(100% - 2.5rem), 74rem);
}

.wordmark > span:last-child {
  white-space: nowrap;
}

.home-hero-v2 {
  min-height: min(48rem, calc(100svh - 4.5rem));
  padding-block: clamp(3.5rem, 9vw, 7rem);
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.home-hero-v2 .hero-copy {
  max-width: 38rem;
}

.home-hero-v2 .hero-actions {
  margin-top: clamp(1.35rem, 3vw, 1.75rem);
}

.home-hero-v2 h1 {
  max-width: 9.5ch;
  margin: 0.9rem 0 1.5rem;
  font-size: clamp(3.25rem, 13vw, 6.75rem);
  font-weight: 560;
  letter-spacing: -0.075em;
  line-height: 0.88;
}

.home-hero-v2 h1 span,
.home-hero-v2 h1 em {
  display: block;
}

.home-hero-v2 h1 em {
  color: var(--muted);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.home-hero-assurance {
  margin: 1.15rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.home-hero-assurance::before {
  width: 0.55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #20b869;
  box-shadow: 0 0 0 0.3rem color-mix(in srgb, #20b869 14%, transparent);
  content: '';
}

.hero-demo-stack {
  min-height: 30rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  grid-template-rows: repeat(2, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.hero-demo-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.hero-demo-card:first-child {
  grid-row: 1 / 3;
}

.hero-demo-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  content: '';
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.hero-demo-card:hover::before {
  transform: scale(1.035);
}

.hero-demo-card.hotel::before { background-image: linear-gradient(180deg, transparent 42%, rgba(6,18,34,.75)), var(--img-cobalto-hero); }
.hero-demo-card.product::before { background-image: linear-gradient(180deg, transparent 38%, rgba(18,12,8,.68)), var(--img-aura); }
.hero-demo-card.service::before { background-image: linear-gradient(180deg, transparent 32%, rgba(9,13,18,.72)), url("/assets/images/lumen-hero-7b966b089c.webp"); }

.hero-demo-card div {
  position: absolute;
  inset: auto 0.85rem 0.85rem;
  padding: 0.75rem;
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 0.85rem;
  background: rgba(10,12,14,.72);
  color: white;
  backdrop-filter: blur(0.65rem);
}

.hero-demo-card strong { font-size: 0.82rem; }
.hero-demo-card span { color: rgba(255,255,255,.68); font-family: ui-monospace, monospace; font-size: 0.61rem; text-transform: uppercase; }

.business-types {
  margin-bottom: clamp(4rem, 10vw, 7rem);
  padding-block: 1rem;
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  border-block: 1px solid var(--line);
  scrollbar-width: none;
}

.business-types::-webkit-scrollbar { display: none; }

.business-types span {
  flex: 0 0 auto;
  min-height: 2.65rem;
  padding: 0.65rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.76rem;
}

.featured-grid,
.all-designs-grid {
  display: grid;
  gap: 1rem;
}

.project-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.project-card .concept-copy {
  min-height: 14.75rem;
}

.project-card .concept-open {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}

.project-card:hover .concept-open {
  background: var(--ink);
  color: var(--paper);
}

.more-designs {
  margin: 1.25rem 0 clamp(5rem, 10vw, 8rem);
}

.more-designs summary {
  min-height: 4.25rem;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.more-designs summary::-webkit-details-marker { display: none; }
.more-designs summary span:last-child { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.65rem; font-weight: 400; text-transform: uppercase; }
.more-designs[open] summary { margin-bottom: 1rem; }

.conversion-proof {
  margin-bottom: clamp(4rem, 10vw, 8rem);
  padding: clamp(1.4rem, 5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: clamp(1.2rem, 3vw, 2rem);
  background: var(--surface);
}

.conversion-proof header {
  max-width: 42rem;
  margin-bottom: 2rem;
}

.conversion-proof h2 {
  margin: 0.6rem 0 0;
  font-size: clamp(2rem, 6vw, 3.8rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.conversion-flow {
  display: grid;
  gap: 0.75rem;
}

.conversion-step {
  min-height: 9rem;
  padding: 1.15rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--paper);
}

.conversion-step span { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.65rem; text-transform: uppercase; }
.conversion-step strong { max-width: 12ch; font-size: clamp(1.35rem, 4vw, 2rem); letter-spacing: -0.04em; line-height: 1; }
.conversion-step:nth-child(2) { background: var(--ink); color: var(--paper); }
.conversion-step:nth-child(2)::after { width: 8rem; aspect-ratio: 1; position: absolute; inset: auto -2rem -4rem auto; border-radius: 50%; background: var(--accent); content: ''; animation: home-close-glow 8s ease-in-out infinite; }
.conversion-step:last-child strong { color: var(--accent); }

.footer-brand { display: grid; gap: 0.25rem; }
.footer-brand strong { font-size: 1rem; }
.footer-brand small { color: var(--muted); }

body.demo-page {
  min-width: 18rem;
  overflow-x: hidden;
}

body.demo-page > .demo-stage {
  min-height: 100vh;
  position: relative;
  inset: auto;
  z-index: auto;
  display: block !important;
  overflow: visible;
}

body.demo-page .demo-view[hidden] {
  display: block !important;
}

body.demo-page .demo-back {
  width: auto;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-inline: 1rem;
  border: 1px solid color-mix(in srgb, var(--ink) 48%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  color: var(--ink);
  box-shadow: 0 0.7rem 2.2rem rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 0.72rem;
  font-weight: 780;
  text-decoration: none;
  pointer-events: auto;
}

body.demo-page .demo-controls {
  inset: auto max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  align-items: center;
}

.demo-controls .demo-interest {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0.7rem 2.2rem rgba(0, 0, 0, 0.12);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
}

.custom-direction {
  margin-block: clamp(4rem, 9vw, 7rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
}

.custom-direction h2 {
  max-width: 13ch;
  margin: 0.75rem 0 0;
  font-size: clamp(2.1rem, 7vw, 4.4rem);
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.custom-direction-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.35rem;
}

.custom-direction-copy p {
  max-width: 39rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.5vw, 1.18rem);
}

.custom-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.custom-signals span {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 720;
}

.real-map {
  --map-surface: #fff;
  --map-ink: #121212;
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(15rem, 48vw) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--map-surface);
  color: var(--map-ink);
  box-shadow: 0 1.25rem 3.5rem rgba(16, 28, 39, 0.09);
  isolation: isolate;
}

.real-map-viewport {
  min-height: 15rem;
  position: relative;
  overflow: hidden;
  background: #dce7df;
}

.real-map-viewport iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  border: 0;
  filter: saturate(0.68) contrast(0.94);
}

.real-map::before {
  content: none !important;
}

.real-map-details {
  min-width: 0;
  padding: 1rem 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--map-surface);
  color: var(--map-ink);
  text-align: left;
}

.real-map-copy {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.real-map-copy span {
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  opacity: 0.58;
  text-transform: uppercase;
}

.real-map-copy strong {
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.real-map-link {
  flex: 0 0 auto;
  padding: 0.68rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--map-ink) 24%, transparent);
  border-radius: 999px;
  color: var(--map-ink);
  font-size: 0.72rem;
  font-weight: 760;
  text-decoration: none;
}

.cobalto-map.real-map {
  aspect-ratio: auto;
  min-height: 0;
  border-radius: 1.35rem;
  background: #fff;
}

.cobalto-location {
  padding-block: clamp(3rem, 8vw, 6rem);
}

.marina-visit .real-map,
.blanc-booking .real-map {
  max-width: 64rem;
  margin: 2.5rem auto;
}

.habitat-contact .real-map,
.bruma-close .real-map {
  grid-column: 1 / -1;
}

.habitat-contact .real-map {
  color: var(--habitat-paper);
}

.bruma-close .real-map {
  color: var(--bruma-paper);
}

/* Lumen Forma — caso anónimo inspirado en un proyecto real */
.visual-lumen {
  background:
    linear-gradient(180deg, transparent 36%, rgba(8, 9, 10, 0.82)),
    url("/assets/images/lumen-hero-7b966b089c.webp") 58% center / cover no-repeat;
}

.visual-lumen span {
  inset: auto 1.3rem 1.25rem;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.8rem, 6vw, 3.8rem);
  font-weight: 850;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.demo-lumen {
  --lumen-paper: #f5f5f0;
  --lumen-surface: #fff;
  --lumen-ink: #111214;
  --lumen-muted: #676b70;
  --lumen-line: rgba(17, 18, 20, 0.16);
  --lumen-orange: #ff4b16;
  --lumen-cyan: #02cfc1;
  min-height: 100svh;
  overflow: clip;
  background: var(--lumen-paper);
  color: var(--lumen-ink);
  font-family: Arial, Helvetica, sans-serif;
}

[data-theme="dark"] .demo-lumen {
  --lumen-paper: #101112;
  --lumen-surface: #17191a;
  --lumen-ink: #f5f5ef;
  --lumen-muted: #b4b7ba;
  --lumen-line: rgba(255, 255, 255, 0.18);
}

[data-demo="lumen"] .demo-controls {
  --paper: var(--lumen-paper);
  --ink: var(--lumen-ink);
  --line: var(--lumen-line);
}

.lumen-shell {
  width: min(calc(100% - 1.5rem), 78rem);
  margin-inline: auto;
}

.lumen-nav {
  min-height: 4.5rem;
  padding-block: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--lumen-line);
}

.lumen-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  text-decoration: none;
  text-transform: uppercase;
}

.lumen-brand-mark {
  width: 2.2rem;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0.65rem;
  background: var(--lumen-ink);
}

.lumen-brand-mark::before,
.lumen-brand-mark::after {
  position: absolute;
  content: '';
}

.lumen-brand-mark::before {
  width: 1.15rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--lumen-orange);
  box-shadow: 0 0.5rem 0 var(--lumen-cyan);
  transform: rotate(-38deg);
}

.lumen-brand-mark::after {
  width: 0.28rem;
  height: 1.45rem;
  border-radius: 999px;
  background: #fff;
  transform: rotate(38deg);
}

.lumen-nav nav {
  display: none;
  align-items: center;
  gap: 1.25rem;
}

.lumen-nav button,
.lumen-link-button,
.lumen-cta {
  min-height: 2.8rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--lumen-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
}

.lumen-nav nav button {
  min-height: 2.3rem;
  padding: 0;
  border: 0;
}

.lumen-nav > .lumen-cta,
.lumen-cta.is-primary {
  border-color: var(--lumen-ink);
  background: var(--lumen-ink);
  color: var(--lumen-paper);
}

.lumen-hero {
  padding-block: clamp(2.25rem, 8vw, 6rem) 1.5rem;
  display: grid;
  gap: 1.5rem;
}

.lumen-kicker {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--lumen-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lumen-kicker::before {
  width: 1.8rem;
  height: 0.16rem;
  border-radius: 999px;
  background: var(--lumen-orange);
  content: '';
}

.lumen-hero h2 {
  max-width: 9.4ch;
  margin: 1rem 0 1.2rem;
  font-size: clamp(3.5rem, 15vw, 7.6rem);
  font-weight: 870;
  letter-spacing: -0.085em;
  line-height: 0.82;
}

.lumen-hero h2 em {
  display: block;
  color: var(--lumen-orange);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.lumen-hero-copy > p:not(.lumen-kicker) {
  max-width: 35rem;
  color: var(--lumen-muted);
  font-size: clamp(1rem, 2.7vw, 1.18rem);
  line-height: 1.65;
}

.lumen-actions {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.lumen-actions .lumen-cta,
.lumen-actions .lumen-link-button {
  min-height: 3.25rem;
  padding-inline: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lumen-hero-media {
  min-height: clamp(25rem, 118vw, 38rem);
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  background: #090a0b url("/assets/images/lumen-hero-7b966b089c.webp") 64% center / cover no-repeat;
  isolation: isolate;
}

.lumen-hero-media::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 72% 50%, rgba(255, 75, 22, 0.08), transparent 42%);
  content: '';
  animation: lumen-pulse 5s ease-in-out infinite;
}

.lumen-hero-media::after {
  position: absolute;
  inset: auto 1rem 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.9rem;
  background: rgba(8, 9, 10, 0.72);
  color: #fff;
  content: 'Diseño · Producción · Instalación';
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.67rem;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.lumen-facts {
  padding: 1rem 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--lumen-line);
}

.lumen-facts div {
  min-width: 0;
  padding: 0.35rem 0.65rem;
  border-left: 1px solid var(--lumen-line);
}

.lumen-facts div:first-child { border-left: 0; padding-left: 0; }
.lumen-facts strong { display: block; font-size: clamp(1.1rem, 4vw, 1.65rem); letter-spacing: -0.05em; }
.lumen-facts span { display: block; margin-top: 0.2rem; color: var(--lumen-muted); font-size: 0.58rem; line-height: 1.35; text-transform: uppercase; }

.lumen-ticker {
  padding-block: 0.9rem;
  overflow: hidden;
  border-bottom: 1px solid var(--lumen-line);
  background: var(--lumen-orange);
  color: #111;
}

.lumen-ticker-track {
  width: max-content;
  display: flex;
  gap: 2rem;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  animation: lumen-marquee 22s linear infinite;
}

.lumen-section {
  padding-block: clamp(4.5rem, 11vw, 8rem);
}

.lumen-heading {
  margin-bottom: clamp(2rem, 6vw, 4rem);
  display: grid;
  gap: 1rem;
}

.lumen-heading h3 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2.7rem, 9vw, 5.8rem);
  font-weight: 840;
  letter-spacing: -0.075em;
  line-height: 0.9;
}

.lumen-heading > p:last-child {
  max-width: 34rem;
  margin: 0;
  color: var(--lumen-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.lumen-services-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 84%);
  gap: 0.8rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.lumen-services-grid::-webkit-scrollbar { display: none; }

.lumen-service-card {
  min-height: 24rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid var(--lumen-line);
  border-radius: 1.2rem;
  background: var(--lumen-surface);
}

.lumen-service-card:nth-child(2) {
  background: var(--lumen-orange);
  color: #111;
}

.lumen-service-card:nth-child(3) {
  background: var(--lumen-ink);
  color: var(--lumen-paper);
}

.lumen-service-card > span {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.67rem;
  letter-spacing: 0.1em;
}

.lumen-service-card h4 {
  max-width: 8ch;
  margin: auto 0 0.85rem;
  font-size: clamp(2.1rem, 8vw, 3.8rem);
  letter-spacing: -0.075em;
  line-height: 0.92;
}

.lumen-service-card p {
  margin: 0;
  color: currentColor;
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.72;
}

.lumen-showcase {
  padding-block: clamp(4rem, 10vw, 7rem);
  background: #0d0e10;
  color: #fff;
}

.lumen-showcase-layout {
  display: grid;
  gap: 1rem;
}

.lumen-project-image {
  min-height: clamp(25rem, 115vw, 42rem);
  position: relative;
  overflow: hidden;
  border-radius: 1.2rem;
  background: url("/assets/images/lumen-project-515e6bce91.webp") center / cover no-repeat;
}

.lumen-project-image::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.68));
  content: '';
}

.lumen-project-tag {
  position: absolute;
  inset: 1rem auto auto 1rem;
  z-index: 1;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(12, 13, 14, 0.58);
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.lumen-project-copy {
  padding: clamp(1.5rem, 6vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 1.2rem;
}

.lumen-project-copy h3 {
  max-width: 9ch;
  margin: 0;
  font-size: clamp(3rem, 10vw, 6.3rem);
  letter-spacing: -0.08em;
  line-height: 0.86;
}

.lumen-project-copy h3 span { color: var(--lumen-cyan); }
.lumen-project-copy p { max-width: 32rem; margin: 0; color: rgba(255, 255, 255, 0.68); line-height: 1.65; }

.lumen-capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.lumen-capabilities span {
  min-height: 4.5rem;
  padding: 0.8rem;
  display: flex;
  align-items: end;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
}

.lumen-process {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
}

.lumen-process-image {
  min-height: clamp(22rem, 104vw, 38rem);
  overflow: hidden;
  border-radius: 1.2rem;
  background: url("/assets/images/lumen-process-f8a8cf32bc.webp") 58% center / cover no-repeat;
}

.lumen-process-copy h3 {
  max-width: 10ch;
  margin: 0.9rem 0 2rem;
  font-size: clamp(2.8rem, 10vw, 5.8rem);
  letter-spacing: -0.08em;
  line-height: 0.9;
}

.lumen-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lumen-line);
}

.lumen-steps li {
  padding-block: 1rem;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.8rem;
  border-bottom: 1px solid var(--lumen-line);
}

.lumen-steps span {
  color: var(--lumen-orange);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.7rem;
}

.lumen-steps strong { display: block; font-size: 1rem; }
.lumen-steps p { margin: 0.35rem 0 0; color: var(--lumen-muted); font-size: 0.88rem; line-height: 1.5; }

.lumen-faq {
  display: grid;
  gap: 2rem;
}

.lumen-faq h3 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(2.8rem, 10vw, 5.8rem);
  letter-spacing: -0.08em;
  line-height: 0.9;
}

.lumen-faq-list {
  border-top: 1px solid var(--lumen-line);
}

.lumen-faq-list details {
  border-bottom: 1px solid var(--lumen-line);
}

.lumen-faq-list summary {
  min-height: 4.5rem;
  padding: 1rem 2.4rem 1rem 0;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 0.94rem;
  font-weight: 760;
  cursor: pointer;
  list-style: none;
}

.lumen-faq-list summary::-webkit-details-marker { display: none; }
.lumen-faq-list summary::after { position: absolute; right: 0; content: '+'; color: var(--lumen-orange); font-size: 1.5rem; font-weight: 400; }
.lumen-faq-list details[open] summary::after { content: '−'; }
.lumen-faq-list details p { margin: 0; padding: 0 2rem 1.3rem 0; color: var(--lumen-muted); line-height: 1.6; }

.lumen-close {
  width: min(calc(100% - 1.5rem), 78rem);
  margin: 0 auto 1rem;
  padding: clamp(2rem, 8vw, 5rem);
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--lumen-orange);
  color: #111;
  isolation: isolate;
}

.lumen-close::before {
  width: 18rem;
  aspect-ratio: 1;
  position: absolute;
  inset: -8rem -6rem auto auto;
  z-index: -1;
  border: 3.5rem solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  content: '';
  animation: lumen-orbit 11s linear infinite;
}

.lumen-close h3 {
  max-width: 10ch;
  margin: 0.8rem 0 1.5rem;
  font-size: clamp(3rem, 12vw, 6.8rem);
  letter-spacing: -0.085em;
  line-height: 0.84;
}

.lumen-close p:not(.lumen-kicker) { max-width: 35rem; line-height: 1.6; }
.lumen-close .lumen-cta { margin-top: 1rem; display: inline-flex; align-items: center; background: #111; color: #fff; border-color: #111; }

.lumen-footer {
  padding-block: 2rem 7rem;
  display: grid;
  gap: 0.75rem;
  color: var(--lumen-muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.lumen-footer strong { color: var(--lumen-ink); font-size: 0.85rem; }

@keyframes lumen-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes lumen-marquee {
  to { transform: translateX(-50%); }
}

@keyframes lumen-orbit {
  to { transform: rotate(360deg); }
}

@media (min-width: 42rem) {
  .lumen-shell { width: min(calc(100% - 3rem), 78rem); }
  .lumen-nav nav { display: flex; }
  .lumen-hero { grid-template-columns: minmax(0, 0.82fr) minmax(24rem, 1.18fr); align-items: center; }
  .lumen-hero-media { min-height: 42rem; }
  .lumen-facts { grid-column: 1 / -1; }
  .lumen-heading { grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr); align-items: end; }
  .lumen-services-grid { grid-auto-flow: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .lumen-service-card { min-height: 30rem; }
  .lumen-showcase-layout { grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr); }
  .lumen-project-image { min-height: 42rem; }
  .lumen-process { grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr); align-items: center; }
  .lumen-process-image { min-height: 40rem; }
  .lumen-faq { grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1.15fr); }
  .lumen-footer { grid-template-columns: 1fr 2fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lumen-hero-media::before,
  .lumen-ticker-track,
  .lumen-close::before { animation: none !important; }
}

@media (min-width: 42rem) {
  .real-map {
    grid-template-rows: minmax(18rem, 26vw) auto;
  }

  .real-map-details {
    padding: 1.05rem 1.2rem;
  }

  .cobalto-map.real-map {
    align-self: center;
  }
}

@media (min-width: 42rem) {
  .featured-grid,
  .all-designs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conversion-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .custom-direction { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

@media (min-width: 60rem) {
  .home-hero-v2 { grid-template-columns: minmax(0, .9fr) minmax(32rem, 1.1fr); }
  .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .all-designs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 41.99rem) {
  :root { --page: calc(100% - 2.5rem); }
  .topbar-note { display: none; }
  .home-hero-v2 { padding-top: 2.75rem; }
  .home-hero-v2 h1 { max-width: 8.6ch; }
  .hero-demo-stack { min-height: 27rem; grid-template-columns: 1.12fr .88fr; }
  .hero-demo-card:first-child { grid-row: 1 / 3; }
  .section-heading h2,
  .promise-lead h2,
  .home-process h2,
  .home-close h2 { text-align: left; }
  .section-heading > p,
  .hero-copy,
  .promise-points p,
  .home-process p,
  .contact-intro > p { text-align: left; }
}

@media (max-width: 25rem) {
  :root { --page: calc(100% - 2rem); }
  .hero-demo-stack { min-height: 31rem; grid-template-columns: 1fr; grid-template-rows: 1.4fr .8fr .8fr; }
  .hero-demo-card:first-child { grid-row: auto; }
  .demo-controls .demo-interest { padding-inline: 0.8rem; font-size: 0.66rem; }
}