/* Dorax Finance — the home page, second look (2026-10-11; owner, on the design canvas built from Wise's landing and his eight references: "La amé, push it").
   Light, warm and calm: a sage-white page (#F2F4EE), white cards, the app's own forest (#163300) and lime (#9FD182), Inter as in the app.
   Everything is under .lp2, with l2- classes, so the rules of the first look (.lp, .lp-hero, .bento ... in home.css and landing-system.css) never reach it.
   The app's own parts used here (the calculator's sliders and dream buttons, the runway track, the language menu) read the app's variables, so .lp2 gives
   them light values.
   Third look, v213 (2026-10-13, the canvas "Landing Dorax con personajes", approved: "publish"): the page is drawn around Dorax's people and things
   (js/ui/art.js, css/components/art.css): seven people at the top, three in "who it is for", one in each step, one between home and company, one at
   the end of the calculator's way, the one who holds the key, the one who answers the questions, the one who waves at the end. The phone of the
   second look and its three big numbers left the page. */
html:is(.pm-pub-lp2, #pm-0), html:is(.pm-pub-lp2, #pm-0) body { background: #F2F4EE; }
.lp2 {
  --l2-forest: #163300; --l2-forest-2: #1F4209; --l2-lime: #9FD182; --l2-lime-2: #B9E2A2; --l2-mint: #E2F6D5; --l2-sage: #E7EDE0; --l2-sage-2: #D6E1CB;
  --l2-ink: #0E0F0C; --l2-ink-2: #454745; --l2-ink-3: #5F625D; --l2-line: #E1E5DC; --l2-line-strong: #C3C9BD; --l2-soft: #F2F4EE; --l2-dark: #0E0F0C; --l2-dark-2: #171A15; --l2-dark-line: #262A22;
  --l2-blue: #5B9DFF; --l2-on-dark: #D4D4D4; --l2-on-dark-2: #959793; --l2-ease: cubic-bezier(.2, .8, .2, 1);
  /* the app's variables, light, for the app's own parts on this page */
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F2F4EE; --well: #F2F4EE; --ink: #0E0F0C; --ink-strong: #0E0F0C; --ink-2: #454745; --ink-3: #5F625D;
  --line: #E1E5DC; --line-strong: #C3C9BD; --hover-line: #8E9488; --brand: #163300; --track: #DCE2D5; --knob: #FFFFFF; --focus: #163300;
  position: relative; min-height: 100vh; background: var(--l2-soft); color: var(--l2-ink); font-family: var(--font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.lp2 *, .lp2 *::before, .lp2 *::after { box-sizing: border-box; }
.lp2 svg { flex: none; }
.l2-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
.lp2 small { font-size: inherit; }
.lp2 b, .lp2 strong { color: inherit; }      /* the app colours every b; here a figure takes its block's colour unless a rule below says otherwise */
.lp2 b small, .l2-samt small { font-size: .6em; font-weight: inherit; letter-spacing: 0; opacity: .72; }

/* buttons, labels, headings */
.l2-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 16px/1 var(--font); letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 160ms var(--l2-ease), background-color 160ms ease-out; }
.l2-btn svg { width: 18px; height: 18px; }
.l2-btn:hover { transform: translateY(-1px); } .l2-btn:active { transform: scale(.97); }
.l2-btn:focus-visible { outline: 2px solid var(--l2-forest); outline-offset: 3px; }
.l2-btn.lg { min-height: 56px; padding: 0 30px; font-size: 17px; }
.l2-btn.sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.l2-btn.lime { background: var(--l2-lime); color: var(--l2-forest); } .l2-btn.lime:hover { background: #ABD991; color: var(--l2-forest); }
.l2-btn.forest { background: var(--l2-forest); color: var(--l2-lime); } .l2-btn.forest:hover { background: var(--l2-forest-2); color: var(--l2-lime); }
.l2-btn.white { background: #FFFFFF; color: var(--l2-ink); box-shadow: 0 0 0 1px var(--l2-line); }
.l2-eyebrow { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px 0 12px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--l2-forest); }
.l2-eyebrow i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--l2-lime); box-shadow: 0 0 0 3px rgba(159, 209, 130, .3); }
.l2-eyebrow.dark { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); color: var(--l2-lime); }
.l2-h1 { margin: 0; font-size: clamp(46px, 6.6vw, 92px); font-weight: 600; letter-spacing: -.045em; line-height: .98; color: var(--l2-ink); text-wrap: balance; }
.l2-h1 .hl { display: block; color: var(--l2-forest); }
.l2-h2 { margin: 0; font-size: clamp(36px, 4.2vw, 56px); font-weight: 500; letter-spacing: -.04em; line-height: 1.03; color: var(--l2-ink); text-wrap: balance; }
.l2-sub { margin: 18px 0 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--l2-ink-2); }
.l2-sec { padding-block: 120px; scroll-margin-top: 12px; }
.l2-sec-h { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.l2-sec-h .l2-sub { margin: 0; }
.l2-sec-h.light .l2-h2 { color: #FFFFFF; } .l2-sec-h.light .l2-sub { color: #C9CEC4; }
.l2-white { background: #FFFFFF; }
.l2-ck { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; background: rgba(159, 209, 130, .18); color: var(--l2-forest); }
.l2-ck svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* the bar */
.l2-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; min-height: calc(84px + var(--safe-t, 0px)); padding-top: var(--safe-t, 0px); }
.l2-nav .brand { padding: 0; justify-self: start; color: var(--l2-forest); }
.l2-nav .brand .logo, .l2-ft-brand .brand .logo { height: 28px; color: inherit; } .l2-nav .logo .ac { fill: var(--l2-lime); }
.l2-links { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); }
.l2-link { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--l2-ink-2); transition: background-color 150ms ease-out, color 150ms ease-out; }
.l2-link:hover { background: var(--l2-soft); color: var(--l2-ink); }
.l2-link:focus-visible { outline: 2px solid var(--l2-forest); outline-offset: 2px; }
.lp2 .l2-actions { margin: 0; justify-self: end; display: flex; align-items: center; gap: 16px; }
.lp2 .lang-pill { height: 36px; min-height: 36px; border-color: var(--l2-line-strong); color: var(--l2-ink); background: #FFFFFF; }
.l2-in { color: var(--l2-ink); text-decoration: none; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.l2-in:hover { color: var(--l2-forest); }

/* the hero */
.l2-hero { padding-top: 48px; scroll-margin-top: 0; }
.l2-copy { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.l2-lead { margin: 0; max-width: 580px; font-size: 20px; line-height: 1.5; color: var(--l2-ink-2); text-wrap: pretty; }
.l2-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.l2-trust { margin: 0; font-size: 14px; font-weight: 500; color: var(--l2-ink-3); }
.l2-hero { padding-bottom: 88px; }
/* the people at the top: five in a row (owner: "reduce … a 5"), with a lime shadow ("cambia el estilo a sombra lima"), side by side, the one in the middle a little bigger; five with a piece of their month above them (no line under them: owner, "qué es esa raya") */
.l2-cast { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: 150px; }
.l2-p { position: relative; width: 150px; margin: 0 -10px; }
.l2-p.big { width: 196px; z-index: 1; }
.l2-chip { position: absolute; left: 50%; bottom: calc(100% + 46px); z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line), 0 18px 36px -22px rgba(22, 51, 0, .45); transform: translateX(-50%); white-space: nowrap; text-align: left; }
.l2-chip.low { bottom: calc(100% - 26px); }
.l2-chip > small { font-size: 12px; font-weight: 600; color: var(--l2-ink-3); }
.l2-chip > b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--l2-forest); font-variant-numeric: tabular-nums; }
.l2-chip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; background: #FFFFFF; box-shadow: 1px 1px 0 0 var(--l2-line); transform: translate(-50%, -5px) rotate(45deg); }
/* the days of freedom drawn in a moment of the month (rwTrack, features/ahead/) */
.lp2 .rw-track { gap: 4px; }
.lp2 .rw-seg .bar { display: block; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.lp2 .rw-seg .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.lp2 .rw-seg .lbl { display: none; }

/* who it is for: three people with a lime shadow, each with the thing it is about */
.l2-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.l2-who-c { display: flex; flex-direction: column; padding: 32px; border-radius: 32px; background: var(--l2-soft); }
.l2-who-c > .fig { width: 176px; }
.l2-who-c h3 { margin: 28px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--l2-ink); }
.l2-who-c p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--l2-ink-2); }

/* your money, with a date: the calculator, a card split in two (v213: two rows of buttons; owner: "demasiado larga esta sección") */
.l2-calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; border-radius: 36px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); }
.l2-calc-l { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 48px; min-width: 0; }
.l2-calc-l .l2-sub { margin: 0; font-size: 17px; }
.l2-calc-l > .l2-btn { margin-top: 12px; }
.l2-grp { margin-top: 8px; }
.l2-lbl { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--l2-ink-2); }
.l2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.l2-pick { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px 0 6px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line-strong); color: var(--l2-ink); font: 500 15px/1.2 var(--font); white-space: nowrap; cursor: pointer; transition: background-color 200ms ease-out, color 200ms ease-out; }
.l2-pick.amt { padding: 0 18px; font-variant-numeric: tabular-nums; }
.l2-pick:hover { box-shadow: 0 0 0 1px var(--l2-forest); }
.l2-pick:focus-visible { outline: 2px solid var(--l2-forest); outline-offset: 2px; }
.l2-pick[aria-pressed="true"] { background: var(--l2-forest); color: #FFFFFF; box-shadow: none; }
.l2-pick-ic.obj { width: 30px; }
.l2-pick[aria-pressed="true"] .obj { --obj-bg: #FFFFFF; }
.l2-calc-r { display: flex; flex-direction: column; padding: 48px; background: var(--l2-mint); min-width: 0; }
.l2-calc-r > small { font-size: 15px; font-weight: 600; color: var(--l2-forest); }
.lp2 .calc-month { display: block; margin-top: 4px; font-size: clamp(36px, 3.8vw, 52px); font-weight: 600; letter-spacing: -.045em; line-height: .98; color: var(--l2-forest); overflow-wrap: anywhere; }
.l2-pace { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--l2-ink-2); }
.l2-cost { margin: 6px 0 0; font-size: 14px; color: var(--l2-ink-3); }
.l2-run { display: flex; align-items: flex-end; gap: 16px; margin-top: 24px; }
.l2-run-bars { flex: 1; min-width: 0; }
.lp2 .calc-line { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.lp2 .calc-line i { flex: 1 1 0; min-width: 0; height: calc(6% + var(--k, 1) * 94%); border-radius: 8px 8px 3px 3px; background: #FFFFFF; transition: height 400ms var(--l2-ease); }
.lp2 .calc-line i:last-child { background: var(--l2-forest); }
.lp2 .calc-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--l2-ink-2); }
.fig.l2-calc-fig { width: 150px; flex: none; margin-bottom: 28px; margin-right: 26px; }      /* v214: room for the open hands, drawn whole now (css/components/art.css) */
.l2-cnote { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--l2-ink-3); }

/* the moments of the month */
.l2-sec-mo { padding-top: 0; }
.l2-mo-panel { padding: 64px; border-radius: 40px; background: var(--l2-sage); }
.l2-mo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.l2-mo-head .l2-sub { margin-top: 14px; }
.l2-mo-row { display: flex; align-items: stretch; gap: 16px; margin-top: 48px; }
.l2-mo { all: unset; box-sizing: border-box; flex: 1 1 0; min-width: 0; min-height: 440px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border-radius: 28px; background: var(--l2-sage-2); color: var(--l2-ink); text-align: left; cursor: pointer; transition: flex-grow 500ms var(--l2-ease), background-color 300ms ease-out, color 300ms ease-out; }
.l2-mo:hover { background: #CDDAC0; }
.l2-mo:focus-visible { outline: 2px solid var(--l2-forest); outline-offset: 3px; }
.l2-mo.on { flex-grow: 1.7; background: var(--l2-forest); color: #FFFFFF; cursor: default; }
.l2-mo-ic { display: block; width: 80px; flex: none; }
.l2-mo-ic .obj { --obj-bg: #FFFFFF; }
.l2-mo.on .l2-mo-ic .obj { --obj-bg: #1F4209; --obj-ink: #E2F6D5; }
.l2-mo-t { display: block; margin-top: auto; padding-top: 40px; font-size: 30px; font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.l2-mo.on .l2-mo-t { color: var(--l2-lime); }
.l2-mo-p { display: block; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--l2-ink-2); }
.l2-mo.on .l2-mo-p { color: #D6DCCF; }
.l2-mo-ui { display: block; width: 100%; margin-top: 20px; animation: l2-in 380ms var(--l2-ease) both; --track: rgba(255, 255, 255, .14); --brand: #9FD182; }
.l2-mu-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; color: #E8EBE6; }
.l2-mu-row b { color: var(--l2-lime); font-weight: 600; white-space: nowrap; }
.l2-mu-note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.l2-mu-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--l2-lime); color: var(--l2-forest); flex: none; } .l2-mu-ic svg { width: 18px; height: 18px; }
.l2-mu-note > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: #D6DCCF; }
.l2-mu-note b { font-size: 15px; font-weight: 600; color: #FFFFFF; }
.l2-mu-note em { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: var(--l2-lime); color: var(--l2-forest); font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; }
.l2-mu-big { display: block; margin-bottom: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #FFFFFF; }
.l2-mu-bar { display: block; height: 8px; margin: 0 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; } .l2-mu-bar i { display: block; height: 100%; border-radius: 999px; background: var(--l2-lime); }
.l2-mu-sm { display: block; font-size: 13px; color: #D6DCCF; }
.l2-pill { display: inline-flex; align-items: center; margin-top: 22px; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--l2-forest); color: var(--l2-lime); font-size: 14px; font-weight: 600; }
.l2-mo.on .l2-pill { background: var(--l2-lime); color: var(--l2-forest); }

/* what's inside */
.l2-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.l2-bcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.l2-bx { position: relative; display: flex; flex-direction: column; min-height: 380px; padding: 32px; border-radius: 32px; background: var(--l2-soft); overflow: hidden; }
.l2-bx.tall { min-height: 470px; }
.l2-ill { position: relative; flex: 1; min-height: 230px; }
.l2-bt { position: relative; margin: 24px 0 0; max-width: 470px; font-size: 26px; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; color: var(--l2-ink-3); }
.l2-bt span { color: var(--l2-ink); }
.l2-bx.dark { background: var(--l2-forest); }
.l2-bx.dark .l2-bt { color: #C9D2C0; } .l2-bx.dark .l2-bt span { color: var(--l2-lime); }
.l2-glow { position: absolute; right: -140px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(159, 209, 130, .32), rgba(159, 209, 130, 0) 68%); pointer-events: none; }
.l2-rg { position: absolute; left: 50%; top: 50%; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--l2-line-strong); opacity: .6; transform: translate(-50%, -50%); }
.l2-rg.r1 { width: 250px; height: 250px; } .l2-rg.r2 { width: 430px; height: 430px; }
.l2-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--l2-ink-2); white-space: nowrap; }
.l2-nd { display: block; width: 64px; border-radius: 50%; box-shadow: 0 12px 24px -14px rgba(14, 15, 12, .35); }
.l2-nd .obj { --obj-bg: #FFFFFF; }
.l2-node.on .l2-nd .obj { --obj-bg: #163300; --obj-ink: #E2F6D5; }
.l2-node.n1 { left: 8%; top: 40%; } .l2-node.n2 { left: 50%; top: 10%; transform: translateX(-50%); } .l2-node.n3 { right: 8%; top: 40%; }
.l2-file { position: absolute; left: 50%; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line), 0 16px 32px -18px rgba(14, 15, 12, .35); white-space: nowrap; transform: translateX(-50%); }
.l2-file .x { display: block; width: 48px; flex: none; }
.l2-file > span:last-child { display: flex; flex-direction: column; font-size: 12px; color: var(--l2-ink-3); } .l2-file b { font-size: 14px; font-weight: 600; color: var(--l2-ink); }
.l2-kd2 { position: absolute; left: 0; width: 54%; padding: 16px 18px; border: 1.5px dashed var(--l2-line-strong); border-radius: 20px; color: var(--l2-ink-2); }
.l2-kd2 > small { display: block; font-size: 12px; font-weight: 600; }
.l2-kd2 > b { display: block; margin-top: 4px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--l2-ink); white-space: nowrap; }
.l2-kd2.k1 { top: 0; border-color: var(--l2-forest); } .l2-kd2.k2 { top: 112px; }
.l2-tap { position: absolute; right: -16px; top: -16px; display: block; width: 38px; }
.l2-tap .obj { --obj-bg: #163300; --obj-ink: #E2F6D5; }
.l2-pop { position: absolute; right: 0; top: 34px; width: 52%; display: flex; flex-direction: column; padding: 16px 18px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line), 0 20px 40px -18px rgba(14, 15, 12, .35); }
.l2-pop > b { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.l2-pop > span { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--l2-ink-2); }
.l2-pop em { font-style: normal; font-weight: 600; color: var(--l2-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.l2-pop .tot { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--l2-line); } .l2-pop .tot em { color: var(--l2-forest); }
.l2-notice { position: absolute; left: 0; right: 12%; top: 6px; display: flex; gap: 14px; padding: 18px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line), 0 20px 40px -20px rgba(14, 15, 12, .35); }
.l2-nt-ic { display: block; width: 48px; flex: none; }
.l2-nt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.l2-nt small { font-size: 12px; font-weight: 600; color: var(--l2-forest); }
.l2-nt b { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--l2-ink); }
.l2-nt em { font-style: normal; font-size: 12px; color: var(--l2-ink-3); }
.l2-whatif { position: absolute; right: 0; bottom: 6px; max-width: 300px; padding: 14px 16px; border-radius: 20px; background: var(--l2-forest); color: #E8EBE6; font-size: 14px; line-height: 1.45; }
.l2-fb { position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; width: 60%; height: 190px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.l2-fb i { flex: 1; border-radius: 8px 8px 3px 3px; background: rgba(159, 209, 130, .35); } .l2-fb i.on { background: var(--l2-lime); }
.l2-fc { position: absolute; display: flex; flex-direction: column; padding: 14px 16px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .45); }
.l2-fc > small { font-size: 12px; font-weight: 600; color: var(--l2-ink-3); }
.l2-fc > b { margin-top: 2px; font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: var(--l2-ink); white-space: nowrap; }
.l2-fc.f1 { right: 0; top: 18px; } .l2-fc.f2 { right: 8%; top: 118px; }

/* for entrepreneurs (PJ) */
.l2-pj { padding-block: 120px; background: var(--l2-forest); scroll-margin-top: 0; }
.l2-pj-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 56px; }      /* the way in, and the page for PJ and MEI */

/* home and company on the home page: each side with what it does for you, the person with the company between them */
.l2-hc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 20px; margin-top: 64px; }
.l2-hc-side { display: flex; flex-direction: column; padding: 32px; border-radius: 32px; background: var(--l2-mint); color: var(--l2-ink); }
.l2-hc-side.co { background: #FFFFFF; }
.l2-pj .l2-hc .obj { --obj-ink: #163300; --obj-bg: #E2F6D5; }
.l2-hc-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 36px; padding: 0 14px 0 4px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.l2-hc-tag .obj { width: 28px; flex: none; }
.l2-hc-side.co .l2-hc-tag { background: var(--l2-lime); color: var(--l2-forest); } .l2-pj .l2-hc-side.co .l2-hc-tag .obj { --obj-bg: #FFFFFF; }
.l2-hc-side.home .l2-hc-tag { background: var(--l2-forest); color: var(--l2-lime); } .l2-pj .l2-hc-side.home .l2-hc-tag .obj { --obj-bg: #1F4209; --obj-ink: #E2F6D5; }
.l2-hc-fig { display: block; }
.l2-hc-lbl { display: block; margin-top: 28px; font-size: 14px; font-weight: 600; color: var(--l2-ink-3); }
.lp2 .l2-hc-amt { display: block; margin-top: 6px; font-size: 52px; font-weight: 500; letter-spacing: -.045em; line-height: 1; white-space: nowrap; color: var(--l2-forest); font-variant-numeric: tabular-nums; }
.l2-hc-feats { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; }
.l2-hc-feats li { display: flex; align-items: flex-start; gap: 14px; padding-block: 18px; border-top: 1px solid rgba(22, 51, 0, .14); font-size: 15px; line-height: 1.5; color: var(--l2-ink-2); }
.l2-hc-feats li:last-child { padding-bottom: 0; }
.l2-hc-feats b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--l2-forest); }
.l2-hc-ic.obj { width: 48px; margin-top: -2px; }
.l2-pj .l2-hc-side.home .l2-hc-ic.obj { --obj-bg: #FFFFFF; }
.l2-hc-join { display: flex; flex-direction: column; align-items: center; align-self: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--l2-lime); text-align: center; }
.l2-hc-join > .fig { width: 168px; }
.l2-hc-say { display: inline-flex; align-items: center; gap: 8px; }
.l2-hc-say i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--l2-lime); color: var(--l2-forest); } .l2-hc-say svg { width: 16px; height: 16px; stroke-width: 2.4; }
.l2-hc-note { max-width: 190px; font-size: 13px; font-weight: 500; line-height: 1.45; color: #C9CEC4; }

/* how it works, in three steps: one person each (v213; the page How it works keeps .l2-steps) */
.l2-steps3 { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.l2-step { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 32px 34px; border-radius: 28px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); }
.l2-step > .fig { width: 160px; margin: 0 auto 22px; }
.l2-no { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--l2-mint); color: var(--l2-forest); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.l2-step h3 { margin: 12px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--l2-ink); }
.l2-step p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--l2-ink-2); }
.l2-more { display: flex; justify-content: center; margin: 40px 0 0; }

/* the blog on the home page: its own cards (css/screens/blog.css) under a head with the person who reads */
.l2-bl-head { display: flex; align-items: flex-end; gap: 32px; }
.l2-bl-head > .fig { width: 150px; flex: none; }
.l2-bl-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1; min-width: 0; }
.l2-bl-copy .l2-sub { margin: 0; }
.l2-bl-head > .l2-btn { flex: none; }
.l2-bl-grid { margin-top: 48px; }

/* how it works */
.l2-steps { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; padding: 64px; border-radius: 40px; background: var(--l2-mint); }
.l2-steps-l { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.l2-steps-l .l2-sub { margin: 0; }
.l2-steps-r { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.l2-st { display: flex; align-items: stretch; gap: 14px; }
.l2-st-c { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; flex: none; } .l2-st-c svg { width: 28px; height: 28px; }
.l2-st-p { flex: 1; min-width: 0; min-height: 88px; display: flex; flex-direction: column; justify-content: center; padding: 14px 36px; border-radius: 999px; }
.l2-st-p b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.l2-st-p span { margin-top: 3px; font-size: 15px; line-height: 1.4; }
.l2-st.s1 .l2-st-c, .l2-st.s1 .l2-st-p { background: #FFFFFF; color: var(--l2-ink); } .l2-st.s1 .l2-st-c { color: var(--l2-forest); } .l2-st.s1 .l2-st-p span { color: var(--l2-ink-2); }
.l2-st.s2 .l2-st-c, .l2-st.s2 .l2-st-p { background: var(--l2-lime-2); color: var(--l2-forest); }
.l2-st.s3 .l2-st-c, .l2-st.s3 .l2-st-p { background: var(--l2-forest-2); color: #FFFFFF; } .l2-st.s3 .l2-st-c { color: var(--l2-lime); } .l2-st.s3 .l2-st-p span { color: #D6DCCF; }
.l2-st.s4 .l2-st-c, .l2-st.s4 .l2-st-p { background: var(--l2-forest); color: #FFFFFF; } .l2-st.s4 .l2-st-c, .l2-st.s4 .l2-st-p b { color: var(--l2-lime); } .l2-st.s4 .l2-st-p span { color: #D6DCCF; }

/* your data */
.l2-trustsec { padding-block: 120px; background: var(--l2-dark); scroll-margin-top: 0; }
.l2-tr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
.l2-tc { padding: 30px; border-radius: 28px; background: var(--l2-dark-2); border: 1px solid var(--l2-dark-line); }
.l2-tc-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--l2-lime); color: var(--l2-forest); } .l2-tc-ic svg { width: 24px; height: 24px; }
.l2-tc h3 { margin: 28px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: #F0F2EE; }
.l2-tc p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--l2-on-dark-2); }
.l2-lock { display: grid; place-items: center; height: 280px; border-radius: 24px; background: #121410; }
.l2-lock .c1 { display: grid; place-items: center; width: 210px; height: 210px; border-radius: 50%; background: rgba(159, 209, 130, .1); }
.l2-lock .c2 { display: grid; place-items: center; width: 136px; height: 136px; border-radius: 50%; background: var(--l2-lime); color: var(--l2-forest); } .l2-lock .c2 svg { width: 52px; height: 52px; }
.l2-disc { margin: 28px 0 0; text-align: center; font-size: 14px; color: var(--l2-on-dark-2); }

/* questions */
.l2-faq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 64px; }
.l2-faq-l { position: sticky; top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.l2-faq-l .l2-sub { margin: 0; }
.l2-faq-l > .fig { width: 168px; margin-top: 12px; }
.l2-faq-cap { margin: -6px 0 0; font-size: 14px; font-weight: 600; color: var(--l2-forest); }
.l2-faq-l .linkbtn { color: var(--l2-forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.l2-faq { display: flex; flex-direction: column; gap: 12px; }
.l2-faq details { padding: 0 26px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); }
.l2-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--l2-ink); }
.l2-faq summary::-webkit-details-marker { display: none; }
.l2-faq summary:focus-visible { outline: 2px solid var(--l2-forest); outline-offset: 4px; border-radius: 8px; }
.l2-pm { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--l2-soft); color: var(--l2-forest); flex: none; transition: transform 250ms ease-out, background-color 250ms ease-out; } .l2-pm svg { width: 16px; height: 16px; stroke-width: 2.4; }
.l2-faq details[open]:not(.closing) .l2-pm { transform: rotate(45deg); background: var(--l2-lime); }
.l2-faq details p { margin: 0; padding: 0 0 24px; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--l2-ink-2); }

/* the closing call to action */
.l2-end { padding-bottom: 120px; }
.l2-end-box { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 88px 64px; border-radius: 40px; background: var(--l2-lime); }
.l2-end-box .l2-h2 { position: relative; z-index: 1; max-width: 640px; font-size: clamp(36px, 4.6vw, 64px); color: var(--l2-forest); }
.l2-end-r { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: none; }
.l2-end-r p { margin: 0; font-size: 15px; font-weight: 500; color: var(--l2-forest); }
.l2-end-box.with-fig { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h fig" "r fig"; align-items: center; gap: 28px 40px; padding: 56px 64px; }      /* the person in the middle of the box (owner: "céntrala, está muy abajo") */
.l2-end-box.with-fig .l2-h2 { grid-area: h; align-self: end; max-width: 760px; }
.l2-end-box.with-fig .l2-end-r { grid-area: r; align-self: start; }
.fig.l2-end-fig { grid-area: fig; align-self: center; width: 200px; }

/* footer */
.l2-foot { padding: 72px 0 40px; background: var(--l2-dark); color: var(--l2-on-dark-2); }
.l2-ft-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr); gap: 32px; }
.l2-ft-brand .brand { padding: 0; color: #E8EBE6; } .l2-ft-brand .logo .ac { fill: var(--l2-lime); }
.l2-ft-brand p { margin: 16px 0 0; max-width: 320px; font-size: 14px; line-height: 1.55; }
/* v246: Dorax on social media, under the website's line: the networks' names as pills, each opening apart */
.l2-ft-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
.l2-ft-social > span { font-size: 13px; font-weight: 600; color: #E8EBE6; }
.l2-ft-social ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.l2-soc { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(232, 235, 230, .22); border-radius: 999px; color: #E8EBE6; font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color 160ms ease-out, color 160ms ease-out; }
.l2-soc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .7; }
.l2-soc:hover { border-color: var(--l2-lime); color: var(--l2-lime); }
.l2-soc:focus-visible { outline: 2px solid var(--l2-lime); outline-offset: 2px; }
.l2-ft-lang { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--l2-on-dark-2); } .l2-ft-lang svg { width: 16px; height: 16px; }
.l2-ft-lang select.lang { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--l2-dark-line); background: var(--l2-dark-2); color: #E8EBE6; font: 500 14px var(--font); }
.l2-ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.l2-ft-cols h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #E8EBE6; }
.l2-ft-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.l2-ft-cols .l2-link { min-height: 36px; padding: 0; color: var(--l2-on-dark-2); }
.l2-ft-cols .l2-link:hover { background: none; color: var(--l2-lime); }
.l2-ft-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--l2-dark-line); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 32px; font-size: 13px; line-height: 1.55; color: #7E817B; }
.l2-ft-bottom p { margin: 0; }

/* the first moments: the words rise, then the phone; the rest of the page comes in as it is scrolled to ([data-reveal], home.css) */
#public.enter .l2-copy > * { animation: rise var(--t3) var(--ease) both; }
#public.enter .l2-copy > *:nth-child(2) { animation-delay: 50ms; } #public.enter .l2-copy > *:nth-child(3) { animation-delay: 100ms; } #public.enter .l2-copy > *:nth-child(n+4) { animation-delay: 150ms; }
#public.enter .l2-p { animation: rise 640ms var(--ease) 200ms both; }
#public.enter .l2-p:nth-child(2), #public.enter .l2-p:nth-child(4) { animation-delay: 260ms; } #public.enter .l2-p:nth-child(1), #public.enter .l2-p:nth-child(5) { animation-delay: 320ms; }
@media (prefers-reduced-motion: reduce) { .l2-mo-ui { animation: none; } .l2-mo, .l2-btn, .l2-pick, .lp2 .calc-line i { transition: none; } }

@media (max-width: 1100px) {
  .l2-calc { grid-template-columns: minmax(0, 1fr); }
  .l2-hc-join > .fig { width: 132px; }
  .l2-mo-row { flex-wrap: wrap; } .l2-mo { flex: 1 1 calc(50% - 8px); min-height: 380px; } .l2-mo.on { flex-grow: 1; }
  .l2-steps { grid-template-columns: minmax(0, 1fr); }
  .l2-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .l2-faq-l { position: static; }
  .l2-ft-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .l2-links { display: none; } .l2-nav { grid-template-columns: auto minmax(0, 1fr); }
  .l2-p { width: 118px; margin: 0 -8px; } .l2-p.big { width: 150px; } .l2-chip { display: none; } .l2-cast { margin-top: 48px; }
  .l2-who { grid-template-columns: minmax(0, 1fr); }
  .l2-hc { grid-template-columns: minmax(0, 1fr); } .l2-hc-join { padding-block: 8px; } .l2-hc-say i { transform: rotate(90deg); } .l2-hc-note { max-width: 280px; }
  .l2-bl-head { flex-wrap: wrap; } .l2-bl-copy { flex-basis: calc(100% - 182px); }
}
@media (max-width: 720px) {
  .l2-wrap { padding-inline: 16px; }
  .l2-nav { min-height: calc(64px + var(--safe-t, 0px)); gap: 10px; }
  .l2-nav .brand .logo { height: 24px; }
  .lp2 .l2-actions { gap: 10px; }
  .lp2 .l2-actions .l2-btn.sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .lp2 .l2-actions .lang-pill { height: 32px; min-height: 32px; }
  .l2-in { font-size: 14px; }
  .l2-hero { padding-top: 24px; }
  .l2-h1 { font-size: 11vw; letter-spacing: -.04em; }
  .l2-h2 { font-size: clamp(26px, 8.6vw, 38px); }
  .l2-copy { gap: 18px; }
  .l2-lead { font-size: 17px; }
  .l2-cta { flex-direction: column; align-self: stretch; } .l2-cta .l2-btn { width: 100%; }
  .l2-hero { padding-bottom: 48px; }
  .l2-p { width: 76px; margin: 0 -7px; } .l2-p.big { width: 96px; }
  .l2-who { margin-top: 36px; gap: 14px; }
  .l2-who-c { flex-direction: row; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 24px; } .l2-who-c > .fig { width: 96px; flex: none; }
  .l2-who-c h3 { margin-top: 4px; font-size: 20px; } .l2-who-c p { font-size: 15px; }
  .l2-sec { padding-block: 72px; } .l2-sec-mo { padding-top: 0; }
  .l2-sub { font-size: 16px; }
  .l2-calc { border-radius: 28px; }
  .l2-calc-l { padding: 28px 22px; } .l2-calc-l > .l2-btn { align-self: stretch; }
  .l2-calc-r { padding: 28px 22px; }
  .l2-run { gap: 12px; } .fig.l2-calc-fig { width: 104px; margin-right: 18px; }
  .lp2 .calc-line { height: 112px; gap: 4px; }
  .l2-mo-panel { padding: 28px 18px; border-radius: 28px; }
  .l2-mo-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .l2-mo-row { margin-top: 28px; } .l2-mo { flex: 1 1 100%; min-height: 0; padding: 24px; } .l2-mo-t { padding-top: 28px; font-size: 26px; }
  .l2-mo-ic { width: 64px; }
  .l2-bento { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .l2-bx, .l2-bx.tall { min-height: 0; padding: 24px; border-radius: 28px; }
  .l2-ill { min-height: 250px; }
  .l2-bt { font-size: 21px; }
  .l2-node.n1 { left: 0; } .l2-node.n3 { right: 0; }
  .l2-ill.cur, .l2-ill.exp { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .l2-notice, .l2-whatif, .l2-kd2, .l2-pop { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; }
  .l2-whatif { align-self: flex-end; max-width: 300px; margin-left: 24px; }
  .l2-kd2.k2 { display: none; }
  .l2-pop { margin-left: 24px; }
  .l2-pj, .l2-trustsec { padding-block: 72px; }
  .l2-pj-go { flex-direction: column; } .l2-pj-go .l2-btn { width: 100%; }
  .l2-hc { gap: 14px; margin-top: 40px; } .l2-hc-side { padding: 24px; border-radius: 28px; } .l2-hc-amt { font-size: 40px; }
  .l2-hc-join > .fig { width: 120px; } .l2-hc-feats { margin-top: 22px; } .l2-hc-feats li { padding-block: 14px; }
  .l2-steps3 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
  .l2-step { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; padding: 18px; border-radius: 24px; }
  .l2-step > .fig { width: 96px; margin: 0; grid-row: span 3; } .l2-step .l2-no { justify-self: start; } .l2-step h3 { margin-top: 6px; font-size: 18px; }
  .l2-bl-head { flex-direction: column; align-items: flex-start; gap: 20px; } .l2-bl-head > .fig { width: 110px; } .l2-bl-grid { margin-top: 32px; }
  .l2-steps { padding: 28px 18px; border-radius: 28px; gap: 28px; }
  .l2-st-c { width: 56px; height: 56px; } .l2-st-c svg { width: 22px; height: 22px; }
  .l2-st-p { min-height: 56px; padding: 14px 20px; border-radius: 28px; } .l2-st-p b { font-size: 16px; }
  .l2-tr-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .l2-lock { height: 200px; }
  .l2-faq details { padding: 0 20px; } .l2-faq summary { font-size: 16px; min-height: 64px; }
  .l2-end { padding-bottom: 72px; }
  .l2-end-box { flex-direction: column; align-items: flex-start; padding: 44px 20px; border-radius: 28px; }
  .l2-end-box.with-fig { display: flex; gap: 20px; padding: 44px 20px; } .fig.l2-end-fig { align-self: center; width: 160px; }
  .l2-faq-l > .fig { width: 120px; }
  .l2-end-box .l2-h2 { font-size: 7vw; }      /* on a phone its size follows the width, so the closing sentence stays on two lines (owner, 2026-10-05) */
  .l2-end-r { align-self: stretch; } .l2-end-r .l2-btn { width: 100%; }
  .l2-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l2-ft-bottom { grid-template-columns: minmax(0, 1fr); }
}