/* localmkr · /agencias, the Revolut remake (data/agencias/revolut/BRIEF.md). One pinned scene where the hero photo becomes
   the middle card of a row of three, then scenes with centered 48 px titles, short leads and one strong visual each.
   Geist, as the landing. Everything is static and complete by default (no JS, reduced motion, phones); html.fx, set by
   agencias.js on a desktop with motion, pins scenes 1 and 2. */
:root{
  --ink:#16171C; --ink-2:#55595F; --ink-3:#83878E; --paper:#fff; --soft:#F3F4F6; --soft-2:#E8EAEE; --line:rgba(22,23,28,.1);
  --sky:#3E96EC; --night:#05060B; --up:#3DDC97; --amber:#F2C14E;
  --sans:'Geist',system-ui,-apple-system,sans-serif;
  --rev:cubic-bezier(.35,0,0,1); --e-out:cubic-bezier(.16,1,.3,1);
  --wrap:clamp(1180px,72vw,1448px); --gut:max(24px,calc((100vw - var(--wrap))/2));   /* Revolut's column on a wide view (1448 at 2000 px; 1180 up to 1640) */ --nav:72px;
  --ch:clamp(300px,40vh,640px);            /* the middle card's height: scene 1 derives from it (Revolut: 40 % of the view, no cap;
                                             with 420 the frame stopped growing at a 1050 px view and the photo did not: 15/10) */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 8px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--sans);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{object-fit:cover}
h1,h2,h3,p,figure,ul{margin:0;padding:0}
ul{list-style:none}
h1,h2,h3{font-weight:500;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.skip-link{position:fixed;z-index:100;left:16px;top:12px;padding:12px 16px;border-radius:10px;background:#fff;color:var(--ink);clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{clip-path:none}

h1{font-size:clamp(50px,6.2vw,96px);line-height:.98;letter-spacing:-.045em}
h2{font-size:clamp(34px,3.35vw,52px);line-height:1.06;letter-spacing:-.035em}
.button{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:999px;font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s,color .2s,transform .3s var(--e-out)}
.button:active{transform:scale(.97)}
.button.dark{background:var(--ink);color:#fff}.button.dark:hover{background:#2D2F36}
.button.light{background:#fff;color:var(--ink)}.button.light:hover{background:#ECEDEF}
.orb{display:inline-block;flex:none;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0%,#e4deff 15%,#abb9f8 35%,#936aca 60%,#495583 85%);box-shadow:inset -2px -3px 5px #6d4b9355,0 0 14px #a5a5f333}
.dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:#1F9D63}

/* ── Nav: white over the photo, a light bar everywhere else (Revolut's «Sign up» pill flips with it) ── */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--nav);display:flex;align-items:center;gap:44px;padding:0 var(--gut);color:#fff;transition:background-color .35s,color .35s,box-shadow .35s}
.nav[data-tone="light"]{background:rgba(255,255,255,.84);color:var(--ink);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-size:22px;font-weight:600;letter-spacing:-.045em}
.wordmark img{border-radius:7px}
.nav nav{display:flex;gap:30px}
.nav-link{font-size:15px;font-weight:500}
.nav-link:hover{opacity:.72}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav .button{height:42px;padding:0 20px;font-size:15px;background:#fff;color:var(--ink)}
.nav[data-tone="light"] .button{background:var(--ink);color:#fff}

/* ── Cards (scene 1): everything inside scales with the card's height (font-size = h/30), so the same card reads at
   scale 1 in the row and at 1.75 as the hero's frame ── */
.card{--h:var(--ch);position:relative;flex:none;width:calc(var(--h)*.708);height:var(--h);border-radius:calc(var(--h)*.042);overflow:hidden;isolation:isolate;color:#fff;font-size:calc(var(--h)/30);background:#B9C4CF}
.card.side{--h:calc(var(--ch)*.9)}
.card-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.card.mid .card-img{top:-9%;height:113%;object-position:49% 0}
.card::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(64% 30% at 50% 47%,rgba(10,14,24,.26),transparent 74%)}
.card-body{position:absolute;left:0;right:0;top:37%;display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:0 1px 14px rgba(0,0,0,.22)}
.card-label{font-size:1em;font-weight:500}
.card-big{font-size:2.75em;font-weight:600;line-height:1.08;letter-spacing:-.035em;margin:.08em 0 .34em;font-variant-numeric:tabular-nums}
.card-pill{display:inline-flex;align-items:center;height:2.35em;padding:0 1.1em;border-radius:999px;background:#fff;color:var(--ink);font-size:.95em;font-weight:500;text-shadow:none}
.card-ex{margin-top:.75em;font-size:.78em;font-weight:500;opacity:.88}
.chip{position:absolute;left:.75em;right:.75em;bottom:.75em;display:flex;align-items:center;gap:.7em;padding:.75em .85em;border-radius:1em;background:#fff;color:var(--ink);font-size:.92em;line-height:1.25}
.chip-ic{flex:none;display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:var(--sky);color:#fff}
.chip-ic svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip-t{display:grid;flex:1;min-width:0}
.chip-t b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-t small{font-size:.86em;color:var(--ink-3)}
.chip-v{font-weight:500;white-space:nowrap}
.seals{position:absolute;left:.75em;right:.75em;bottom:.75em;display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;height:4.3em;border-radius:1em;background:#fff;color:var(--ink)}
.seals>i{height:62%;background:var(--line)}
.seal{display:flex;align-items:center;justify-content:center;gap:.4em}
.seal b{display:inline-flex;align-items:center;height:1.95em;padding:0 .5em;border-radius:.32em;background:var(--ink);color:#fff;font-size:.98em;font-weight:600;letter-spacing:-.02em}
.seal.alt b{background:none;color:var(--ink);box-shadow:inset 0 0 0 .13em var(--ink)}
.seal small{font-size:.64em;font-weight:600;line-height:1.12;letter-spacing:-.01em;text-transform:uppercase}

/* ── Scene 1, static: the hero with its frame, then «Tus clientes» below ── */
.s1-hero{position:relative;height:100svh;min-height:620px;max-height:1100px;overflow:hidden;color:#fff;background:#3F96EC}
.s1-photo{position:absolute;inset:0;overflow:hidden}
.s1-photo picture{position:absolute;inset:0}
.s1-img{position:absolute;left:0;top:0;width:100%;height:100%;object-position:50% 0}
.s1-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,34,82,.3) 0%,rgba(6,34,82,.12) 34%,transparent 54%)}
/* the hero title grows with the view as the frame does (Revolut: 88 px at 1440 × 900, 136 at 2000 × 1150); 89 px at 1440 × 900 as
   before, its column and its line in proportion (15/10) */
.s1-copy{--hf:clamp(50px,min(6.2vw,9.9vh),140px);position:absolute;z-index:3;left:var(--gut);top:calc(var(--nav) + clamp(16px,3.6vh,48px));width:min(calc(var(--hf) * 7.4),calc(100% - 2*var(--gut)))}
.s1-copy h1{font-size:var(--hf)}
/* the line ends before the frame: the frame's left edge is 50 % − 0.62 × the card's height (Revolut keeps its line clear of it) */
.s1-copy p{max-width:clamp(260px,calc(50vw - var(--ch) * .6195 - var(--gut) - 28px),420px);margin:22px 0 30px;font-size:clamp(17px,min(1.35vw,2.2vh),24px);line-height:1.45;letter-spacing:-.015em;text-shadow:0 1px 18px rgba(6,30,70,.2)}
.s1-frame.card{position:absolute;z-index:2;left:50%;bottom:0;margin-left:calc(var(--h)*-.354);overflow:visible;background:none;border-radius:calc(var(--h)*.042);box-shadow:inset 0 0 0 1px rgba(255,255,255,.62);transform:scale(1.75);transform-origin:50% 100%}
.s1-frame.card::after{border-radius:inherit}
.s1-clients{position:relative;padding:clamp(88px,11vh,128px) 0 clamp(64px,8vh,104px);text-align:center;background:var(--paper)}
.s1-head{display:flex;flex-direction:column;align-items:center;padding:0 24px}
.s1-head p{max-width:600px;margin:16px 0 26px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;letter-spacing:-.015em}
.s1-row{display:flex;justify-content:center;align-items:center;gap:calc(var(--ch)*.05);margin-top:clamp(36px,5.4vh,56px)}
.s1-note{margin-top:18px;font-size:13px;color:var(--ink-3)}

/* ── Scene 1, pinned (html.fx): one stage; agencias.js plays the change on the first scroll and reverses it at the top ── */
.fx .s1{height:calc(100vh + 640px)}
.fx .s1-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--paper)}
.fx .s1-hero{position:absolute;inset:0;height:auto;min-height:0;max-height:none;overflow:visible;background:none}
.fx .s1-photo{z-index:1;transform-origin:0 0;will-change:transform}
.fx .s1-img{transform-origin:0 0;will-change:transform}
.fx .s1-frame{display:none}
.fx .s1-clients{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--nav) 0 8px;background:none}
.fx .s1-head,.fx .s1-note{position:relative;z-index:2}
.fx .card.side{z-index:0}
.fx .card.mid{z-index:2}
.fx .s1-row .card{will-change:transform}   /* their layers exist before the first wheel: no raster hitch when it starts */
.fx .s1-row{margin-top:clamp(28px,4.4vh,48px)}
.fx .s1-note{margin-top:14px}
.fx .card.mid{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.62)}
.fx .card.mid .card-img{visibility:hidden}

/* ── Scene 2: «Tu primer cliente» (Revolut's «Life, meets savings») ── */
.s2-stage{position:relative;height:100svh;min-height:660px;max-height:1060px;overflow:hidden;color:#fff;background:#1B2130}
/* the four photos are stacked; the one on screen has .is-on (agencias.js crosses them with a slight zoom) */
.s2-photos{position:absolute;inset:0;z-index:0;isolation:isolate}
.s2-photo{position:absolute;inset:0;width:100%;height:100%;object-position:50% 50%;opacity:0}
.s2-photo.is-on{opacity:1}
.s2-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,22,.7) 0%,rgba(8,12,22,.42) 36%,rgba(8,12,22,.24) 62%,rgba(8,12,22,.5) 100%)}
.s2-copy{position:absolute;left:0;right:0;top:calc(var(--nav) + clamp(20px,5vh,56px));display:flex;flex-direction:column;align-items:center;padding:0 24px;text-align:center}
.s2-copy p{max-width:700px;margin:16px 0 26px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;letter-spacing:-.015em}
.s2-card{position:absolute;left:50%;top:calc(50% + clamp(36px,9vh,96px));width:clamp(220px,17vw,250px);margin-left:calc(clamp(220px,17vw,250px)/-2);padding:18px 18px 16px;border-radius:22px;background:rgba(10,14,24,.46);border:1px solid rgba(255,255,255,.42);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 24px 60px -30px rgba(0,0,0,.55);text-align:center}
.s2-ex{display:block;font-size:11px;font-weight:500;opacity:.8}
.s2-slides{display:grid;margin:14px 0 18px}
.s2-slide{grid-area:1/1;display:flex;flex-direction:column;align-items:center}
.s2-slide[hidden]{display:flex;visibility:hidden;opacity:0}
.s2-slide .card-label{font-size:13px}
.s2-big{font-size:42px;font-weight:600;line-height:1.05;letter-spacing:-.04em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.s2-unit{font-size:13px;opacity:.86;margin-bottom:14px}
.s2-slide .card-pill{font-size:13px;height:30px}
.s2-actions{display:flex;justify-content:center;gap:12px}
.s2-actions i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16)}
.s2-actions i:first-child{background:#fff;color:var(--ink)}
.s2-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s2-actions i:last-child svg{fill:currentColor;stroke:none}
.s2-pills{position:absolute;left:0;right:0;bottom:clamp(22px,4.6vh,48px);display:flex;justify-content:center;gap:10px;padding:0 16px}
.s2-pills button{height:46px;padding:0 22px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.88);font-size:17px;font-weight:500;letter-spacing:-.01em;transition:background-color .3s,color .3s}
.s2-pills button:hover{background:rgba(255,255,255,.14)}
.s2-pills button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.fx .s2{height:calc(100vh + 960px)}   /* four rubros, 240 px of scroll each */
.fx .s2-stage{position:sticky;top:0;height:100vh;min-height:0;max-height:none}


/* ── Scene 4: «Preguntale a mkr», the phone in cosmos ── */
.cosmos{background:radial-gradient(60% 38% at 50% 100%,rgba(98,128,190,.3),transparent 70%),
    radial-gradient(1px 1px at 12% 22%,#fff9,transparent),radial-gradient(1px 1px at 27% 64%,#fff7,transparent),radial-gradient(1.5px 1.5px at 41% 13%,#fff8,transparent),
    radial-gradient(1px 1px at 68% 31%,#fff8,transparent),radial-gradient(1.5px 1.5px at 84% 18%,#fff6,transparent),radial-gradient(1px 1px at 91% 58%,#fff7,transparent),
    radial-gradient(1px 1px at 7% 81%,#fff5,transparent),radial-gradient(1px 1px at 57% 47%,#fff5,transparent),radial-gradient(1px 1px at 33% 38%,#fff4,transparent),
    radial-gradient(1px 1px at 76% 84%,#fff5,transparent),radial-gradient(1.5px 1.5px at 18% 47%,#fff5,transparent),linear-gradient(180deg,#05060B,#070B18 60%,#0A1226)}
.s4{position:relative;overflow:hidden;padding:clamp(110px,15vh,150px) 0 0;color:#fff;text-align:center}
.s4-head{display:flex;flex-direction:column;align-items:center;padding:0 24px}
.s4-head p{max-width:600px;margin:16px 0 26px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:rgba(255,255,255,.84)}
.s4-stage{position:relative;height:clamp(500px,64vh,600px);margin-top:clamp(48px,7vh,72px);overflow:hidden}
.s4-head .s4-note{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.5)}
.phone{position:relative;width:min(400px,86vw);margin:0 auto;padding:11px;border-radius:58px 58px 0 0;background:linear-gradient(150deg,#5f626a,#2a2c31 14%,#141518 50%,#2a2c31 86%,#55585f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 -20px 80px -30px rgba(120,150,220,.35)}
.phone-screen{height:calc(clamp(500px,64vh,600px) - 11px);border-radius:48px 48px 0 0;background:#0B0C10;padding:0 20px;text-align:left;overflow:hidden}
.phone-status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:54px;font-size:15px;font-weight:600}
.phone-status>span:first-child{padding-left:14px}
.phone-island{width:112px;height:32px;border-radius:20px;background:#000}
.phone-icons{justify-self:end;display:flex;gap:4px;padding-right:12px}
.phone-icons i{width:5px;border-radius:2px;background:#fff}
.phone-icons i:nth-child(1){height:7px}.phone-icons i:nth-child(2){height:9px}.phone-icons i:nth-child(3){height:11px}
.phone-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:58px;font-size:19px;font-weight:500}
.phone-x{font-size:30px;font-weight:300;line-height:1;padding-left:6px}
.phone-head .orb{justify-self:end;width:40px;height:40px}
.chat{display:flex;flex-direction:column;gap:14px;padding-top:22px}
.chat-q{align-self:flex-end;max-width:78%;padding:13px 17px;border-radius:22px 22px 6px 22px;background:#2B2C32;font-size:16px;line-height:1.35}
.chat-a{position:relative;min-height:300px}
.chat-typing{position:absolute;left:0;top:0;display:none;gap:5px;padding:16px 17px;border-radius:22px 22px 22px 6px;background:#1C1D22}
.chat-typing i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.7)}
.chat-text{position:absolute;left:0;top:0;max-width:82%;padding:13px 17px;border-radius:22px 22px 22px 6px;background:#1C1D22;font-size:16px;line-height:1.35;opacity:0}
.income{position:relative;isolation:isolate;padding:18px 18px 14px}
.income-bg{position:absolute;inset:0;z-index:-1;border-radius:22px;background:#1C1D22}   /* the box that opens out of the answer bubble */
.income-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,255,255,.66)}
.income-ex{font-size:11px;padding:2px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.income-n{display:block;margin:6px 0 4px;font-size:32px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.income-sub{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13.5px;color:rgba(255,255,255,.66)}
.income-owe{color:var(--amber)}
.income-chart{width:100%;height:auto;margin-top:14px;overflow:visible}
.income-goal{stroke:rgba(255,255,255,.34);stroke-width:1.2;stroke-dasharray:2 5}
.income-area{fill:url(#incomeFill)}
.income-line{fill:none;stroke:var(--up);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.income-dot{fill:var(--up);stroke:#1C1D22;stroke-width:3}
.income-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:rgba(255,255,255,.44)}

/* ── «Hacé de esto tu trabajo»: the push before the prices, in cosmos. The agency in motion, a sample (agencias.js plays it
   once in view; still, it is its last frame) ── */
.work{position:relative;overflow:hidden;color:#fff}
.work-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center;min-height:min(100vh,860px);padding:clamp(96px,13vh,140px) var(--gut)}
.work-copy h2{font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.04em}
.work-copy p{margin:18px 0 30px;font-size:clamp(17px,1.45vw,21px);line-height:1.4;color:rgba(255,255,255,.82)}
.work-stage{position:relative;height:540px}
.agency{position:absolute;right:0;top:72px;width:380px;padding:22px 22px 14px;border-radius:26px;background:rgba(19,22,33,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.agency-top{display:flex;justify-content:space-between;align-items:center}
.agency-name{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500}
.agency-name .orb{width:22px;height:22px}
.agency-ex,.income-ex{font-size:11px;padding:2px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);color:rgba(255,255,255,.72)}
.agency-month{display:flex;flex-direction:column;margin:18px 0 20px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05)}
.agency-month span{font-size:13px;color:rgba(255,255,255,.62)}
.agency-total{margin-top:2px;font-size:36px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.agency-h{display:flex;align-items:center;gap:8px;margin:0 4px 6px;font-size:13px;color:rgba(255,255,255,.62)}
.agency-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.agency-list li{display:flex;align-items:center;gap:12px;padding:11px 4px;border-top:1px solid rgba(255,255,255,.07);overflow:hidden}
.agency-list li:first-child{border-top:0}
.av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--c);color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em}
.who{display:grid;flex:1;min-width:0}
.who b{font-size:15px;font-weight:500}
.who small{font-size:12.5px;color:rgba(255,255,255,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{display:grid;font-style:normal;font-size:12px;font-weight:500}
.st>span{grid-area:1/1;justify-self:end;padding:4px 10px;border-radius:999px;white-space:nowrap}
.st-ok{background:rgba(255,255,255,.08);color:rgba(255,255,255,.78)}
.st-new{background:rgba(142,124,240,.22);color:#D9D1FF;opacity:0}
.st-paid{background:rgba(61,220,151,.16);color:#7EF0BE}
.build{position:absolute;left:0;top:124px;z-index:2;width:226px}
.build-page{display:grid;gap:7px;padding:8px 8px 12px;border-radius:18px;background:#F7F5F1;color:var(--ink);box-shadow:0 30px 70px -26px rgba(0,0,0,.75)}
.build-page img{width:100%;height:auto;aspect-ratio:3/2;border-radius:11px}
.build-page b{margin:4px 6px 0;font-size:15px;font-weight:600;letter-spacing:-.02em}
.build-page i{height:6px;margin:0 6px;border-radius:6px;background:#E3DFD7;transform-origin:0 50%}
.build-page i:nth-of-type(2){width:70%}
.build-page>span{justify-self:start;margin:4px 6px 0;padding:6px 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px}
.build-bar{display:flex;align-items:center;gap:9px;margin-top:10px;padding:10px 14px 10px 10px;border-radius:999px;background:rgba(19,22,33,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:12.5px}
.build-bar .orb{width:20px;height:20px}
.build-msg{display:grid}
.build-msg>span{grid-area:1/1;display:flex;align-items:center;gap:7px;white-space:nowrap}
.build-msg .m1{opacity:0}
.toast{position:absolute;right:0;top:0;z-index:3;display:flex;align-items:center;gap:12px;width:268px;padding:12px 16px 12px 12px;border-radius:18px;background:rgba(30,34,48,.94);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 24px 50px -20px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.toast b{display:block;font-size:14px;font-weight:500}
.toast small{font-size:12.5px;color:rgba(255,255,255,.62)}
.toast-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.08)}
.toast-ic .orb{width:22px;height:22px}
.toast-ic.money{background:rgba(61,220,151,.16);color:#7EF0BE;font-size:10.5px;font-weight:600}
.t1{opacity:0}

/* ── The white sections: Revolut's rhythm (centered title, short lead, one visual) ── */
.sec{padding:clamp(88px,11.5vh,136px) var(--gut)}
.sec-head{display:flex;flex-direction:column;align-items:center;max-width:780px;margin:0 auto clamp(40px,6vh,64px);text-align:center}
.sec-head p{max-width:640px;margin-top:16px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;letter-spacing:-.015em;color:var(--ink-2)}
.panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center;max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,56px);border-radius:32px;background:var(--soft)}
.panel[hidden]{display:none}
.panel-copy h3,.points h3{font-size:clamp(24px,2.1vw,30px);line-height:1.12;letter-spacing:-.03em}
.panel-copy p{margin-top:16px;max-width:400px;color:var(--ink-2)}
.shot{display:block;width:100%;max-width:440px;justify-self:center;padding:0;border-radius:22px;overflow:hidden;background:#fff;text-align:left;box-shadow:0 30px 60px -36px rgba(20,30,60,.4),0 0 0 1px var(--line);transition:transform .5s var(--e-out)}
.shot:hover{transform:translateY(-4px)}
.shot img{width:100%;height:auto}
.shot>span{display:block;padding:12px 16px;font-size:12px;color:var(--ink-3);border-top:1px solid var(--line)}
.seg{display:flex;width:max-content;margin:0 auto 28px;padding:4px;border-radius:999px;background:var(--soft)}
.seg button{height:42px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink-2);transition:background-color .25s,color .25s,box-shadow .25s}
.seg button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,30,60,.12)}
.proposal-stage{display:flex;flex-direction:column;align-items:center;gap:36px}
.paper{width:min(420px,100%);border-radius:22px;overflow:hidden;background:#FFFCF6;box-shadow:0 40px 80px -42px rgba(51,41,25,.55),0 0 0 1px rgba(51,41,25,.08)}
.paper-bar{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font-size:17px}
.paper-bar b{font-weight:600}.paper-bar span{font-size:12px;color:#7A7064}
.paper img{width:100%;height:190px;object-position:50% 55%}
.paper figcaption{display:flex;flex-direction:column;align-items:flex-start;padding:22px 24px 20px}
.paper figcaption>span:first-child{font-size:12px;color:#7A7064}
.paper strong{margin:8px 0 18px;font-size:27px;font-weight:500;line-height:1.12;letter-spacing:-.035em}
.paper-cta{align-self:stretch;padding:14px 18px;border-radius:12px;background:#33291F;color:#fff;font-size:14px;font-weight:500}
.paper small{margin-top:10px;font-size:11px;color:#8B8173}
.ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ticks li{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--soft);font-size:14px}
.ticks li::before{content:'';width:15px;height:15px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.fine{margin-top:22px;text-align:center;font-size:13px;color:var(--ink-3)}
.panel-money{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.panel-money .shot img{aspect-ratio:716/560;object-position:top}
.panel-trade{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.points{display:grid;gap:28px}
.points li{padding-top:22px;border-top:1px solid var(--line)}
.points li:first-child{padding-top:0;border-top:0}
.points h3{font-size:clamp(21px,1.7vw,25px)}
.points p{margin-top:8px;max-width:400px;font-size:16px;color:var(--ink-2)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:var(--wrap);margin:0 auto}
.trio article{padding:12px 12px 28px;border-radius:28px;background:var(--soft)}
.trio h3{margin:26px 16px 0;font-size:clamp(21px,1.7vw,25px);letter-spacing:-.03em}
.trio p{margin:8px 16px 0;font-size:16px;color:var(--ink-2)}
.trio-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:176px;border-radius:20px;background:#fff;font-size:15px}
.addr{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;box-shadow:0 0 0 1px var(--line);font-weight:500}
.trio-art small{font-size:11px;color:var(--ink-3)}
.trio-art strong{font-weight:500}
.trio-report{align-items:stretch;padding:28px 30px}
.trio-report>span{font-size:12px;font-weight:500;color:var(--ink-3)}
.trio-report i{height:7px;border-radius:9px;background:var(--soft-2)}
.trio-report i:nth-of-type(1){width:88%}.trio-report i:nth-of-type(2){width:62%}.trio-report i:nth-of-type(3){width:76%}

/* «Tu sistema»: the landing's component (public/index.html #sistema), with the rhythm of these sections */
.lx-sys-tabs{display:flex;justify-content:center;gap:8px;margin:0 auto 34px;overflow-x:auto;scrollbar-width:none;padding:2px}
.lx-sys-tabs::-webkit-scrollbar{display:none}
.lx-sys-tabs button{flex:none;height:42px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink-2);background:var(--soft);transition:background-color .25s,color .25s}
.lx-sys-tabs button:hover{color:var(--ink)}
.lx-sys-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.lx-sys-fig{position:relative;max-width:var(--wrap);margin:0 auto}
.lx-sys-live{position:relative;display:none}
.sys-live .lx-sys-live{display:block}
.sys-live .lx-sys-fallback{display:none}
.lx-sys-screen{position:relative;aspect-ratio:1280/800;width:calc(100% - 120px);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -46px rgba(20,30,60,.42),0 0 0 1px var(--line)}
.lx-sys-screen img,.lx-sys-phone .lx-phone-vp img{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .34s var(--e-out)}
.lx-sys-screen img.on,.lx-sys-phone .lx-phone-vp img.on{opacity:1}
.lx-sys-phone{position:absolute;right:0;bottom:-30px;width:clamp(150px,17%,210px)}
.lx-phone{position:relative;container-type:inline-size;aspect-ratio:71.6/147.6}
.lx-phone-fr{position:absolute;inset:0;z-index:1;border-radius:16cqw;padding:1cqw;background:linear-gradient(150deg,#73767e 0%,#2e3035 13%,#15161a 48%,#2e3035 87%,#6b6e76 100%);box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.18),0 50px 80px -34px rgba(12,18,40,.55),0 18px 34px -20px rgba(12,18,40,.42)}
.lx-phone-in{position:relative;height:100%;display:flex;flex-direction:column;border-radius:15cqw;border:2.7cqw solid #060607;background:#060607;overflow:hidden}
.lx-phone-vp{position:relative;flex:1;overflow:hidden;background:#fff}
.lx-sys-fallback{max-width:520px;margin:0 auto}
.lx-sys-fig figcaption{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-height:24px;margin-top:56px;font-size:15px;color:var(--ink-2);text-align:center}
.ex{display:inline-block;padding:2px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;color:var(--ink-3);white-space:nowrap}
.sys-note{max-width:620px;margin:22px auto 0;text-align:center;font-size:15px;color:var(--ink-3)}

/* The wall of designs, as it was (landing.js columns, differential depth on desktop) */
.wall-section{overflow:hidden;padding:clamp(88px,11.5vh,136px) 0 84px;background:var(--soft)}
.wall-section .sec-head{padding:0 24px;margin-bottom:24px}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start;margin:0 30px;padding:45px 0 35px}
.wall-column{display:grid;gap:20px;will-change:transform}
.wall-column:nth-child(even){padding-top:65px}
.wall-card{display:block;width:100%;padding:0;border-radius:14px;overflow:hidden;background:#fff;text-align:left;box-shadow:0 18px 36px -24px rgba(38,32,51,.4);transition:transform .4s var(--e-out)}
.wall-card:hover{transform:translateY(-5px)}
.wall-card img{width:100%;height:auto;aspect-ratio:.72;object-position:top}
.wall-card img[src*="sq-henson"]{object-fit:contain;background:#fff}
.wall-card>span{display:block;padding:14px 16px;font-size:13px;font-weight:500}
.caption{margin:26px 24px 0;text-align:center;font-size:13px;color:var(--ink-3)}

/* Prices, the money line, the calculator */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:var(--wrap);margin:0 auto}
.price-grid article{padding:32px 30px 34px;border-radius:28px;background:var(--soft)}
.price{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.price b{font-size:clamp(48px,4.4vw,64px);font-weight:500;letter-spacing:-.05em;line-height:1}
.price span{font-size:18px;color:var(--ink-2)}
.price-grid h3{margin-top:26px;font-size:22px;letter-spacing:-.025em}
.price-grid p{margin-top:8px;font-size:16px;color:var(--ink-2)}
.own-money{display:flex;align-items:center;gap:22px;max-width:var(--wrap);margin:20px auto 0;padding:26px 30px;border-radius:28px;background:#EAF3FD}
.own-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--sky);color:#fff}
.own-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.own-money p{font-size:clamp(17px,1.4vw,20px);line-height:1.4;letter-spacing:-.015em;color:var(--ink-2)}
.own-money b{font-weight:500;color:var(--ink)}
/* «Hacé tus cuentas»: the two controls on the gray panel, the result on a dark card (the app's Ingresos card). The numbers
   glide to each new value (agencias.js); the slider is a 46 px band you can hold with a finger, with ± buttons beside it */
.calculator{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(36px,5.4vw,80px);align-items:center;max-width:var(--wrap);margin:20px auto 0;padding:clamp(28px,4.2vw,56px);border-radius:32px;background:var(--soft)}
.calc-main h3{font-size:clamp(30px,2.75vw,40px);line-height:1.06;letter-spacing:-.04em}
.calc-main>p{margin-top:12px;max-width:400px;font-size:clamp(16px,1.25vw,18px);line-height:1.45;color:var(--ink-2)}
.calc-fields{display:grid;gap:30px;margin-top:clamp(30px,3.4vw,44px)}
.calc-field>label{display:block;font-size:15px;font-weight:500;color:var(--ink-2)}
.calc-value{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.calc-n{display:flex;align-items:baseline;min-width:0}
.calc-n b{font-size:clamp(36px,3.15vw,46px);font-weight:500;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-steps{display:flex;flex:none;gap:8px}
.calc-step{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 6px 14px -8px rgba(20,30,60,.3);transition:transform .3s var(--e-out),opacity .2s,background-color .2s;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.calc-step:hover{background:#FAFAFB}
.calc-step:active{transform:scale(.9)}
.calc-step[aria-disabled="true"]{opacity:.34;cursor:default;transform:none}
.calc-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.calc-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:46px;margin:8px 0 0;padding:0;background:none;cursor:pointer;--thumb:30px}
@media (pointer:coarse){.calc-range{--thumb:34px}}   /* a finger gets a bigger thumb */
.calc-range:focus{outline:none}
.calc-range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--ink) calc(var(--thumb)/2 + var(--p,.5)*(100% - var(--thumb))),#D8DBE1 0)}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc((8px - var(--thumb))/2);border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(22,23,28,.1),0 6px 16px -4px rgba(20,30,60,.4);transition:transform .25s var(--e-out),box-shadow .25s}
.calc-range:active::-webkit-slider-thumb{transform:scale(1.12)}
.calc-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px rgba(22,23,28,.1),0 0 0 4px #fff,0 0 0 6px var(--sky)}
.calc-range::-moz-range-track{height:8px;border:0;border-radius:8px;background:#D8DBE1}
.calc-range::-moz-range-progress{height:8px;border-radius:8px;background:var(--ink)}
.calc-range::-moz-range-thumb{width:var(--thumb);height:var(--thumb);border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(22,23,28,.1),0 6px 16px -4px rgba(20,30,60,.4)}
.calc-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #fff,0 0 0 6px var(--sky)}
.calc-scale{display:flex;justify-content:space-between;margin-top:2px;font-size:12.5px;color:#686C74;font-variant-numeric:tabular-nums}
.calc-out{position:relative;isolation:isolate;overflow:hidden;padding:clamp(26px,3vw,40px);border-radius:28px;background:#14161C;color:#fff;box-shadow:0 44px 80px -44px rgba(10,14,30,.6)}
.calc-out::before{content:'';position:absolute;z-index:-1;right:-20%;bottom:-36%;width:92%;height:84%;background:radial-gradient(closest-side,rgba(61,220,151,.15),transparent);pointer-events:none}
.calc-rows{display:grid;gap:16px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1)}
.calc-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.calc-row>span{display:grid;gap:3px;font-size:15px;color:rgba(255,255,255,.8)}
.calc-row small{font-size:12.5px;color:rgba(255,255,255,.52);font-variant-numeric:tabular-nums}
.calc-row b{font-size:20px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-keep{display:flex;flex-direction:column;align-items:flex-start;margin-top:24px}
.calc-keep>span:first-child{font-size:15px;color:rgba(255,255,255,.72)}
.calc-keep>b{margin-top:8px;font-size:clamp(52px,4.9vw,72px);font-weight:500;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-year{display:inline-flex;align-items:baseline;gap:6px;margin-top:18px;padding:8px 15px;border-radius:999px;background:rgba(61,220,151,.14);color:#86F2C3;font-size:15px}
.calc-year b{font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.calc-bar{height:8px;margin-top:28px;border-radius:8px;background:rgba(255,255,255,.14);overflow:hidden}
.calc-bar i{display:block;width:70%;height:100%;border-radius:8px;background:var(--up)}
.calc-split{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-top:12px;font-size:13px;color:rgba(255,255,255,.68);font-variant-numeric:tabular-nums}
.calc-split>span{display:inline-flex;align-items:center;gap:8px}
.calc-split b{font-weight:500;color:#fff}
.calc-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.32)}
.calc-dot.you{background:var(--up)}
.calc-legal{display:block;margin-top:22px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.52);text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* «Aprendé a vender»: the guides as a magazine mosaic. agencias.js deals the six cards into balanced columns (data-cols);
   without it this is a plain grid of the same cards */
.blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:var(--wrap);margin:0 auto}
.blog[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.blog[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.blog[data-cols="1"]{grid-template-columns:minmax(0,1fr)}
.blog-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.blog-col>.post:last-child{flex:1 0 auto}   /* the columns end on one line: the last card of each takes the rest */
.post{display:flex;flex-direction:column;padding:10px;border-radius:28px;background:var(--soft);transition:background-color .45s var(--e-out)}
.post-cover{position:relative;aspect-ratio:var(--ar,1);border-radius:18px;overflow:hidden;isolation:isolate;background:var(--soft-2)}
.post-zoom{position:absolute;inset:0;transition:transform 1.1s var(--e-out)}
.post-zoom img{width:100%;height:100%}
.post-body{flex:1 0 auto;display:flex;flex-direction:column;align-items:flex-start;padding:20px 16px 16px}
.post-cat{font-size:13px;font-weight:500;color:#686C74}
.post h3{margin-top:8px;font-size:clamp(21px,1.75vw,25px);line-height:1.16;letter-spacing:-.03em}
.post p{margin:10px 0 18px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.post-soon{display:inline-flex;align-items:center;gap:8px;height:30px;margin-top:auto;padding:0 13px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:13px;font-weight:500;color:var(--ink-2)}
.post-soon::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--sky)}
@media (hover:hover){.post:hover{background:#ECEEF1}.post:hover .post-zoom{transform:scale(1.045)}}

/* The close: the hero's sky again */
.final{display:flex;justify-content:center;padding:clamp(110px,15vh,160px) 24px;text-align:center;color:#fff;background:linear-gradient(180deg,#3E96EC 0%,#62A9F0 70%,#8CC0F4 100%)}
.final>div{display:flex;flex-direction:column;align-items:center}
.final h2{font-size:clamp(40px,4.6vw,68px)}
.final p{margin:16px 0 30px;font-size:clamp(17px,1.4vw,20px)}
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:40px var(--gut)}
footer .wordmark{font-size:20px}
footer>span,footer>a:last-of-type{font-size:13px;color:var(--ink-2)}
footer p{flex-basis:100%;padding-top:22px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
dialog{width:min(1200px,94vw);max-height:92vh;padding:20px;border:0;border-radius:20px;background:#F6F6F7;color:var(--ink);box-shadow:0 30px 90px #0005}
dialog::backdrop{background:#171820a8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dialog-bar{position:sticky;top:-20px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:6px 0 14px;background:#F6F6F7}
.dialog-bar h2{font-size:17px;letter-spacing:-.02em}
.dialog-close{height:38px;padding:0 18px;border-radius:999px;background:#E6E7EB;font-size:13px}
#dialog-image{width:100%;height:auto;border-radius:8px}

/* ── The night hero (?hero=noche): the same scene in black and platinum. The title stays white; the frame, the pill and
   the seals become dark glass with cold metallic accents (no gold). Opaque enough to keep AA over any photo. ── */
html:not(.fx)[data-hero="noche"] .s1-hero{background:#060A14}   /* pinned, the stage turns white as the photo contracts */
[data-hero="noche"] .s1-veil{background:linear-gradient(90deg,rgba(2,4,10,.42) 0%,rgba(2,4,10,.16) 36%,transparent 56%)}
[data-hero="noche"] .s1-copy .button.dark{background:linear-gradient(180deg,#F4F6F9,#CDD3DB);color:#0A0C11;box-shadow:inset 0 1px 0 #fff,0 10px 30px -12px rgba(0,0,0,.6)}
[data-hero="noche"] .s1-copy .button.dark:hover{background:#F4F6F9}
[data-hero="noche"] :is(.s1-frame,.card.mid){box-shadow:inset 0 0 0 1px rgba(206,213,223,.62)}
html:not(.fx)[data-hero="noche"] .card.mid{background-color:#0B0F19}   /* the frame stays a border over the photo */
[data-hero="noche"] :is(.s1-frame,.card.mid) .card-pill{background:rgba(11,13,19,.8);color:#ECEFF3;box-shadow:inset 0 0 0 1px rgba(206,213,223,.55),inset 0 1px 0 rgba(255,255,255,.12)}
[data-hero="noche"] :is(.s1-frame,.card.mid) .card-ex{color:#DCE1E8;opacity:1}
[data-hero="noche"] :is(.s1-frame,.card.mid) .seals{background:linear-gradient(180deg,rgba(22,25,33,.88),rgba(9,11,16,.9));color:#ECEFF3;box-shadow:inset 0 0 0 1px rgba(206,213,223,.3),inset 0 1px 0 rgba(255,255,255,.08),0 12px 34px -14px rgba(0,0,0,.7)}
[data-hero="noche"] :is(.s1-frame,.card.mid) .seals>i{background:rgba(206,213,223,.24)}
[data-hero="noche"] :is(.s1-frame,.card.mid) .seal b{background:linear-gradient(135deg,#F5F7FA 0%,#BFC6D0 50%,#E6E9EE 100%);color:#0A0C11}
[data-hero="noche"] :is(.s1-frame,.card.mid) .seal.alt b{background:none;color:#ECEFF3;box-shadow:inset 0 0 0 .13em #C7CED8}
[data-hero="noche"] :is(.s1-frame,.card.mid) .seal small{color:#D5DBE3}
/* the comparison switch, only with ?comparar=1 (agencias.js) */
.compare{position:fixed;z-index:60;left:50%;bottom:18px;display:flex;gap:4px;padding:4px;border-radius:999px;transform:translateX(-50%);background:rgba(14,16,22,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 40px -14px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.compare button{height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500;color:rgba(255,255,255,.78)}
.compare button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.compare button[data-p]{width:38px;padding:0}
.compare i{width:1px;margin:8px 4px;background:rgba(255,255,255,.2)}

/* narrower than the wide two-column stage, and phones: the montage stacks (the notice, the page mkr builds, the agency),
   nothing overlapping, everything readable */
@media (max-width:1180px){
  .work-in{grid-template-columns:1fr;gap:40px;min-height:0;text-align:left}
  .work-stage{display:grid;gap:12px;height:auto;width:100%;max-width:440px;margin:0 auto}
  .toast{position:relative;grid-area:1/1;right:auto;top:auto;width:100%}
  .build{position:relative;grid-area:2/1;left:auto;top:auto;width:100%}
  .build-page{grid-template-columns:112px 1fr;grid-template-rows:auto auto auto 1fr;column-gap:12px;row-gap:6px;align-items:start}
  .build-page img{grid-row:1/5;width:112px;height:100%;min-height:84px;aspect-ratio:auto}
  .build-page b{margin:2px 0 0}.build-page i{margin:0}.build-page>span{margin:2px 0 0}
  .build-bar{margin-top:8px}
  .agency{position:relative;grid-area:3/1;right:auto;top:auto;width:100%}
}

/* ── Narrower desktops ── */
@media (max-width:1100px){
  .nav{gap:28px}.nav nav{gap:22px}
  .panel,.panel-money,.panel-trade{grid-template-columns:1fr 1fr}
  .calculator{gap:40px;padding:40px}
}
@media (max-width:1000px){
  .blog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav nav{display:none}
  .panel,.panel-money,.panel-trade{grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): a search row with long names never widens the phone */
  .calculator{grid-template-columns:minmax(0,1fr)}   /* one column, never wider than the phone whatever the numbers say */
  .trio,.price-grid{grid-template-columns:1fr;max-width:560px}
  .lx-sys-screen{width:calc(100% - 90px)}
}

/* ── Phones: the hero to the edge with its frame, the row slides sideways, the landing's phone for «Tu sistema» ── */
@media (max-width:700px){
  :root{--nav:60px;--ch:min(92vw,340px)}
  body{font-size:16px}
  .nav{gap:12px}
  .nav-end{gap:16px}   /* «Entrar» stays: an agency on its phone signs in from the top, not from the footer (noche 14/10) */
  .wordmark{font-size:20px}.wordmark img{width:25px;height:25px}
  .nav .button{height:38px;padding:0 16px;font-size:14px}
  .button{height:48px;padding:0 22px;font-size:15px}
  /* the photo sits lower and melts into the same sky, so the title and the button stay above the cap */
  .s1-hero{--hh:clamp(620px,100svh,900px);--pt:max(9%,calc((318px - var(--hh)*var(--head,.31))/(1 - var(--head,.31))));height:var(--hh);min-height:0;max-height:none;background:linear-gradient(180deg,#3B94EC,#3F96EE)}
  .s1-img{top:var(--pt);height:calc(100% - var(--pt));-webkit-mask-image:linear-gradient(180deg,transparent,#000 13%);mask-image:linear-gradient(180deg,transparent,#000 13%)}
  .s1-veil{display:none}
  html:not(.fx)[data-hero="noche"] .s1-hero{background:#050E1F}   /* the night photo's own top (measured: 5, 14, 31) */
  .s1-copy{left:20px;width:calc(100% - 40px);top:calc(var(--nav) + 20px)}
  .s1-copy h1{font-size:clamp(44px,12.4vw,54px);line-height:1}
  .s1-copy p{max-width:330px;margin:14px 0 20px;font-size:15px;line-height:1.45}
  .s1-frame.card{--h:min(63vw,calc(var(--hh)*.29))}
  .s1-clients{padding:76px 0 52px}
  .s1-head p{font-size:16px}
  .s1-row{justify-content:flex-start;gap:12px;margin-top:34px;padding:6px calc(50% - var(--ch)*.354) 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .s1-row::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:center}
  .s2-stage{height:100svh;min-height:700px;max-height:900px}
  .s2-photo{object-position:22% 50%}   /* the agency's side of each photo: the person and the phone */
  .s2-copy{top:calc(var(--nav) + 18px)}
  .s2-copy p{font-size:15px;margin:12px 0 20px}
  .s2-card{top:auto;bottom:96px;width:216px;margin-left:-108px;padding:16px 16px 14px}
  .s2-big{font-size:36px}
  .s2-pills{justify-content:flex-start;gap:6px;bottom:22px;overflow-x:auto;scrollbar-width:none}
  .s2-pills::-webkit-scrollbar{display:none}
  .s2-pills button{flex:none}
  .s2-pills button:first-child{margin-left:auto}.s2-pills button:last-child{margin-right:auto}
  .s2-pills button{height:38px;padding:0 14px;font-size:14px}
  .work-in{padding:88px 20px 72px}
  .work-copy p{font-size:16px;margin:14px 0 24px}
  .agency{padding:18px 16px 10px}
  .agency-total{font-size:32px}
  .s4{padding-top:88px}
  .s4-head p{font-size:15px}
  .s4-stage{height:500px;margin-top:40px}
  .phone{width:min(340px,88vw);border-radius:50px 50px 0 0;padding:9px}
  .phone-screen{height:491px;border-radius:42px 42px 0 0;padding:0 15px}
  .chat-q,.chat-text{font-size:15px}
  .income-n{font-size:28px}
  .sec{padding:84px 20px}
  .sec-head p{font-size:16px}
  .panel{padding:22px;border-radius:26px;gap:28px}
  .panel-copy p,.points p{font-size:15px}
  .shot{border-radius:18px}
  .seg button{height:40px;padding:0 22px}
  .paper img{height:160px}
  .ticks li{font-size:13px}
  .trio h3,.price-grid h3{font-size:22px}
  .lx-sys-tabs{justify-content:flex-start;margin:0 -20px 22px;padding:2px 20px}
  .lx-sys-screen{display:none}
  .lx-sys-phone{position:relative;right:auto;bottom:auto;width:min(62vw,250px);margin:6px auto 0}
  .lx-sys-fig figcaption{margin-top:24px;font-size:14px}
  .wall-section{padding:84px 0 60px}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 16px;padding:12px 0 30px}
  .wall-column{gap:14px;will-change:auto}
  .wall-column:nth-child(even){padding-top:30px}
  .wall-card>span{font-size:12px;padding:12px}
  .price-grid article{padding:26px 24px 28px}
  .own-money{flex-direction:column;align-items:flex-start;gap:14px;padding:24px}
  .calculator{gap:30px;padding:28px 18px 18px;border-radius:28px}
  .calc-main{padding:0 4px}
  .calc-fields{gap:26px;margin-top:28px}
  .calc-n b{font-size:clamp(32px,10.5vw,40px)}
  .calc-out{padding:26px 22px 22px;border-radius:22px}
  .calc-keep>b{font-size:clamp(42px,14vw,56px)}
  .calc-split{font-size:12.5px}
  .blog{grid-template-columns:minmax(0,1fr);gap:16px}
  .blog-col{gap:16px}
  .post{padding:8px;border-radius:24px}
  .post-cover{border-radius:16px}
  .post-body{padding:18px 12px 12px}
  .post h3{font-size:22px}
  .post p{font-size:15px}
  .final{padding:96px 24px}
  footer{padding:32px 20px}
  dialog{width:96vw;padding:12px;border-radius:14px}
  .dialog-bar{top:-12px}
}
@media (max-width:370px){
  .calc-value{gap:10px}
  .calc-step{width:44px;height:44px}
  .nav .button{padding:0 12px}
  .nav-end{gap:12px}.nav-in{font-size:14px}
  .s2-pills button{padding:0 11px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .wall-column{transform:none!important;will-change:auto}
}

/* the salon scene on a phone: frame the owner (right third), not the agency side */
@media (max-width:767px){.s2-photo[data-rubro="peluquerias"]{object-position:76% 50%}}
/* the wordmark: the name alone at 28px, as in the app (QA operador PC P37) */
.wordmark{font-size:28px!important;font-weight:650;letter-spacing:-.05em;gap:0}
.wordmark img{display:none}
@media (max-width:700px){.wordmark{font-size:24px!important}}
/* scene 2 scrolls like the rest (QA operador PC P35): only the pills change the rubro */
.fx .s2{height:auto!important}
.fx .s2-stage{position:relative!important;top:auto!important;height:100vh!important;max-height:920px!important;min-height:620px!important}

/* «Mostrá. Después, conversá.»: the vidriera (/ext/b-vidriera.css and .js, 15/10). The same business in four real designs of
   its trade, the one in front scrolling through its page; it leaves the column and takes the width of the screen. */
.proposal{overflow-x:clip}   /* the deck in depth and the card sent away go past the edges: never a sideways scroll */
.proposal .ticks{margin-top:34px}
.prop-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:760px;margin:0 auto 26px;padding:5px;border-radius:999px;background:#F1F2F4;width:max-content}
.prop-pick button{height:38px;padding:0 17px;border:0;border-radius:999px;background:transparent;color:#5d6068;font:inherit;font-size:14px;font-weight:550;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.prop-pick button:hover{color:#16171C}
.prop-pick button[aria-selected=true]{background:#fff;color:#16171C;box-shadow:0 1px 2px rgba(17,19,24,.08),0 4px 12px -6px rgba(17,19,24,.18)}
.prop-pick button:focus-visible{outline:2px solid #6b5cff;outline-offset:2px}
.prop-vid{width:min(1560px,calc(100vw - 48px));margin-left:calc(50% - min(780px,50vw - 24px));color:var(--ink)}
.prop-vid .lmv-over{left:calc(var(--lmv-cx) + var(--lmv-cw) - 170px);top:calc(var(--lmv-cy) + var(--lmv-bar) + var(--lmv-vh) - 120px)}
.prop-vid.lmv-narrow .lmv-stage{height:calc(var(--lmv-h) + 210px)}
.prop-vid.lmv-narrow .lmv-over{left:0;right:calc(var(--lmv-pw) + 22px);top:calc(var(--lmv-bar) + var(--lmv-vh) + 16px)}
.prop-vid.lmv-narrow .prop-price i{display:none}.prop-vid.lmv-narrow .prop-price{column-gap:10px}.prop-vid.lmv-narrow .prop-go{flex-wrap:wrap;gap:8px}
.prop-offer{display:grid;gap:8px;padding:14px 16px 16px;border-radius:16px;background:rgba(255,255,255,.96);color:#241f1b;box-shadow:0 22px 50px -18px rgba(17,19,24,.5),0 0 0 1px rgba(17,19,24,.06);backdrop-filter:blur(8px)}
.prop-eye{display:block;font-size:12px;color:#6b6e76}.prop-eye b{color:#16171C;font-weight:600}
.prop-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;margin:0;font-size:12.5px;color:#7a6f66}
.prop-price b{font-size:17px;color:#241f1b;letter-spacing:-.02em}
.prop-price i{width:1px;height:14px;background:rgba(43,38,34,.18);margin:0 7px;align-self:center}
.prop-cta{display:inline-flex;align-items:center;justify-content:center;justify-self:start;height:36px;padding:0 18px;border-radius:10px;background:#1B1C20;color:#fff;font-size:13.5px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.prop-yours{margin-top:-3px;font-size:12px;color:#8a8d94}
.prop-go{display:flex;align-items:center;gap:12px}.prop-go small{font-size:12px;line-height:1.3;color:#6b6e76}
.prop-note{margin:14px auto 0;max-width:640px;text-align:center;font-size:12.5px;color:#8a8d94}
@media (max-width:700px){.prop-pick{width:auto;border-radius:20px;margin-bottom:22px}.prop-pick button{height:34px;padding:0 13px;font-size:13px}}

/* the app's screens in code, not screenshots (operador, QA PC P33: «sacá todas las screenshots feas y usá código real») */
.ui{width:100%;max-width:470px;justify-self:center;display:grid;gap:10px;padding:16px;border-radius:22px;background:#fff;text-align:left;font-size:14px;color:#16171C;box-shadow:0 30px 60px -36px rgba(20,30,60,.42),0 0 0 1px rgba(20,30,60,.06);font-variant-numeric:tabular-nums}
.ui b{font-weight:600}
.ui-foot{display:block;margin-top:2px;font-size:11.5px;color:#9a9ca3}
.ui-av{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;color:#fff;font-size:13px;font-weight:650;text-shadow:0 1px 1px rgba(0,0,0,.2);background:radial-gradient(110% 85% at 26% 16%,hsl(var(--h) 100% 82% / .95) 0%,transparent 55%),radial-gradient(90% 90% at 88% 104%,hsl(calc(var(--h) + 46) 85% 38% / .9) 0%,transparent 62%),linear-gradient(140deg,hsl(var(--h) 74% 60%),hsl(calc(var(--h) + 26) 70% 45%));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 6px rgba(0,0,0,.16)}
.ui-n{display:grid;gap:1px;min-width:0}.ui-n b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-n small{font-size:12px;color:#7b7e86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:#F2F2F0;font-size:12px;font-weight:550;color:#4a4c52}
.ui-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:550;white-space:nowrap;color:#fff;background:linear-gradient(180deg,#34353B,#1B1C20);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(16,17,20,.16)}
.ui-btn.line{color:#16171C;background:#fff;box-shadow:inset 0 0 0 1px rgba(16,17,20,.13)}
.ui-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;background:#F2F2F0;color:#4a4c52}
.ui-tag.blue{background:#E8F0FD;color:#2457C5}.ui-tag.warn{background:#FDF0E3;color:#B85C0F}.ui-tag.ok{background:#E7F6EC;color:#1F8A4C}
/* Buscar */
.ui-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ui-q{display:flex;align-items:center;gap:6px;min-width:0;height:38px;padding:0 12px;border-radius:12px;background:#F6F6F4;font-size:13.5px;flex:1;overflow:hidden;white-space:nowrap}
.ui-q svg,.ui-field svg{width:16px;height:16px;flex:none;fill:none;stroke:#7b7e86;stroke-width:2;stroke-linecap:round}
.ui-q i{font-style:normal;color:#9a9ca3}
.ui-th{display:grid;grid-template-columns:minmax(0,1fr) 86px 70px 84px;gap:10px;padding:4px 8px 0 52px;font-size:11px;font-weight:550;color:#9a9ca3}
.ui-row{display:grid;grid-template-columns:34px minmax(0,1fr) 86px 70px 84px;align-items:center;gap:10px;padding:8px;border-radius:14px}
.ui-row.on{background:#F7F7F5}
.ui-score{display:flex;align-items:center;gap:7px;font-weight:650;font-size:13.5px}.ui-score i{position:relative;width:44px;height:6px;border-radius:6px;background:#ECECE9;overflow:hidden}.ui-score i::after{content:'';position:absolute;inset:0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#43C38A,#1F8A4C)}
.ui-num{font-size:12.5px;color:#4a4c52}
.ui-why{margin:-4px 8px 4px 52px;padding:10px 12px;border-radius:12px;border:1px solid #ECECE9;font-size:12.5px;color:#4a4c52}.ui-why b{display:block;margin-bottom:4px;font-size:12.5px;color:#16171C}.ui-why ul{margin:0;padding-left:16px;display:grid;gap:2px}
/* Hoy */
.ui-dh{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:#7b7e86}.ui-dh b{font-size:20px;color:#16171C;letter-spacing:-.02em}
.ui-seg2{display:flex;gap:2px;padding:3px;border-radius:12px;background:#F2F2F0;overflow:hidden}.ui-seg2 span{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:9px;font-size:12px;font-weight:550;color:#6b6e76;white-space:nowrap}.ui-seg2 span i{font-style:normal;color:#9a9ca3}.ui-seg2 .on{background:#fff;color:#16171C;box-shadow:0 0 0 1px rgba(16,17,20,.06),0 1px 2px rgba(0,0,0,.08)}
.ui-task{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 8px;border-radius:14px}
.ui-task+.ui-task{border-top:1px solid #F0F0EE}
/* Ingresos */
.ui-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ui-kpis>div{display:grid;gap:2px;padding:12px;border-radius:14px;border:1px solid #ECECE9}.ui-kpis span{font-size:12px;color:#7b7e86}.ui-kpis b{font-size:22px;letter-spacing:-.02em}.ui-kpis small{font-size:11.5px;color:#9a9ca3}.ui-kpis small.warn{color:#B85C0F}
.ui-chart{display:grid;gap:8px;padding:12px;border-radius:14px;background:#F7F7F5}.ui-chart>span{font-size:12px;color:#7b7e86}
.ui-bars{display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:8px;height:84px}
.ui-bars i{position:relative;height:calc(var(--v) * 1%);border-radius:6px 6px 3px 3px;background:#DADAD6}.ui-bars i.on{background:linear-gradient(180deg,#34353B,#1B1C20)}
.ui-bars em{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-style:normal;font-size:10.5px;color:#9a9ca3}
.ui-chart{padding-bottom:28px}
.ui-inv{display:grid}.ui-inv>div{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 4px}.ui-inv>div+div{border-top:1px solid #F0F0EE}.ui-amt{font-size:14px}
/* El oficio */
.ui-flags{display:flex;gap:6px;flex-wrap:wrap}.ui-flags button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 10px;border-radius:999px;border:1px solid #ECECE9;background:#fff;color:inherit;font:inherit;font-size:12.5px;font-weight:550;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}.ui-flags button:hover{background:#F7F7F6}.ui-flags .on{border-color:#16171C;box-shadow:inset 0 0 0 1px #16171C}.ui-flags button:focus-visible{outline:2px solid #6b5cff;outline-offset:2px}
.fl{width:21px;height:14px;border-radius:2.5px;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none}
.ui-field{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:12px;border:1px solid #16171C;font-size:14px}
.ui-prices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ui-prices>div{display:grid;gap:3px;align-content:start;padding:12px;border-radius:14px;background:#F7F7F5}.ui-prices span{font-size:12px;font-weight:550;color:#6b6e76}.ui-prices b{font-size:19px;letter-spacing:-.02em;margin:2px 0}.ui-prices small{font-size:11.5px;color:#7b7e86}.ui-prices p{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#2b2d33}.ui-prices em{margin-top:6px;font-style:normal;font-size:11px;line-height:1.4;color:#9a9ca3}
/* the pictures next to each text */
.panel-art{display:block;width:216px;height:144px;object-fit:contain;margin:-8px 0 10px -26px}
.points-art{padding:0!important;border:0!important}
@media (max-width:700px){
  .ui{padding:12px;border-radius:18px;grid-template-columns:minmax(0,1fr)}   /* one column the width of the card: a long name never pushes the phone wider */
  .ui-th{display:none}.ui-row{grid-template-columns:34px minmax(0,1fr) auto}.ui-row .ui-num,.ui-row .ui-score{display:none}.ui-why{margin-left:8px}
  .ui-prices{grid-template-columns:1fr}
  .panel-art{width:162px;height:108px;margin:-6px 0 8px -20px}
}
.points-art+li{padding-top:0!important;border-top:0!important}

/* «El oficio»: the prices change with the country (P46) */
.ui-prices{transition:opacity .18s}.ui-prices.swap{opacity:.25}
/* «Vos ponés la cara» (operator 18/10), the steps of «Hacé de esto tu trabajo» and what each guide already has in the account */
.human-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:880px;margin:0 auto}
.human-grid article{padding:30px 30px 32px;border-radius:28px;background:var(--soft)}
.human-grid article.ours{background:#16171C;color:#fff}
.human-grid h3{font-size:22px;letter-spacing:-.025em}
.human-grid ul{list-style:none;display:grid;gap:12px;margin:20px 0 0;padding:0;font-size:17px;line-height:1.35}
.human-grid li{position:relative;padding-left:22px}
.human-grid li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--sky)}
.human-grid .ours li::before{background:#3DDC97}
.human-n{max-width:640px;margin:28px auto 0;text-align:center;font-size:17px;line-height:1.45;color:var(--ink-2)}
.human-n b{color:var(--ink);font-weight:600}
.work-k{margin:0 0 12px;font-size:14px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.6)}
.work-steps{list-style:none;counter-reset:w;display:grid;gap:10px;margin:0 0 26px;padding:0;font-size:17px;color:rgba(255,255,255,.88)}
.work-steps li{counter-increment:w;display:flex;align-items:center;gap:12px}
.work-steps li::before{content:counter(w);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);font-size:13px;font-weight:600}
.work-n{margin:18px 0 0 !important;font-size:13px !important;color:rgba(255,255,255,.55) !important}
.post-now{display:block;margin:6px 0 14px;font-size:14px;line-height:1.4;color:#0A6B44}
@media (max-width:760px){.human-grid{grid-template-columns:1fr}.human-grid article{padding:24px 22px 26px}.work-steps{font-size:15.5px}}
/* «Mostrá» with 11 trades: one row that scrolls, never a pill broken in two lines (operator 18/10: «sumar más rubros») */
.prop-pick{flex-wrap:nowrap;justify-content:flex-start;width:max-content;max-width:min(calc(100% - 32px),1180px);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.prop-pick::-webkit-scrollbar{display:none}
.prop-pick button{flex:none;scroll-snap-align:center}
@media (max-width:760px){.prop-pick{border-radius:999px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}}