/*
  Lean Browser — hoja de estilos única. Sin frameworks, sin CDNs, sin peticiones a terceros.
  Identidad: teal #1A9E94 (marca) · crema #FAF7F2 · tinta #1A1612.
  Colores de contexto reales del producto: Personal #4f83ff · Trabajo #9b6cff
  · Banca #20b486 · Temporal #e28a2e.
*/

/* ============ Fuentes (self-hosted, subset latin) ============ */
@font-face{ font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/instrument-serif-400.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/plex-sans-500.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/plex-sans-600.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/plex-sans-700.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/plex-mono-500.woff2') format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/plex-mono-600.woff2') format('woff2'); }

/* ============ Tokens ============ */
@property --ctx { syntax:'<color>'; inherits:true; initial-value:#4f83ff; }

:root{
  --cream:#FAF7F2; --sand:#F1EADF; --ink:#1A1612; --muted:#635B51; --line:#E4DACB;
  --teal:#1A9E94; --tealink:#0E6E66; --tealdark:#15837B; --tealtint:#E1F1EF;
  --teal-deep:#0E3B36;
  --personal:#4f83ff; --trabajo:#9b6cff; --banca:#20b486; --temporal:#e28a2e; --cliente:#d65b9e;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --monof:'IBM Plex Mono',ui-monospace,monospace;
}

/* ============ Base ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.5; }
::selection{ background:var(--teal); color:#fff; }
[id]{ scroll-margin-top:84px; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:3px; }

h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3{ text-wrap:balance; font-weight:400; }
p{ text-wrap:pretty; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; }
.mono{ font-family:var(--monof); }
.soon{ text-decoration:line-through; opacity:.5; }

/* ============ Layout ============ */
.container{ max-width:1180px; margin-inline:auto; padding-inline:24px; }
.container--narrow{ max-width:880px; }
.container--mid{ max-width:1100px; }

.sec{ padding-block:clamp(4.5rem,9vw,8rem); }
.sec--line{ border-top:1px solid var(--line); }
.sec--sand{ background:var(--sand); }

/* ============ Header ============ */
.site-head{ position:sticky; top:0; z-index:40; background:rgba(250,247,242,.85);
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line); }
.site-head__row{ height:64px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ width:22px; height:27px; object-fit:contain; object-position:center; flex:none; }
.brand__name{ font-family:var(--serif); font-size:22px; line-height:1; color:var(--ink); }
.site-nav{ display:flex; align-items:center; gap:4px; }
.navlink{ display:none; align-items:center; padding:8px 12px; border-radius:7px;
  font-size:14px; color:var(--muted); text-decoration:none; transition:color .15s ease, background .15s ease; }
.navlink:hover{ color:var(--ink); background:rgba(19,31,55,.05); }
.navlink.is-current{ color:var(--ink); }
@media (min-width:680px){ .navlink{ display:inline-flex; } }

/* ============ Botones y enlaces ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--teal); color:#fff; font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:9px; white-space:nowrap; text-decoration:none;
  box-shadow:0 1px 2px rgba(19,31,55,.10), 0 9px 22px -10px rgba(26,158,148,.6);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(19,31,55,.12), 0 14px 30px -10px rgba(26,158,148,.72); }
.btn:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(19,31,55,.12); }
.btn--sm{ padding:9px 15px; font-size:14px; border-radius:8px;
  box-shadow:0 1px 2px rgba(19,31,55,.08), 0 6px 14px -8px rgba(26,158,148,.5); }
.btn--lg{ padding:15px 26px; font-size:17px; }
.btn-ico{ width:15px; height:15px; flex:none; }
.ml-2{ margin-left:8px; }

.lnk{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:500;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .18s; text-decoration:none; }
.lnk:hover{ border-color:var(--teal); }
.lnk .arw{ transition:transform .2s ease; }
.lnk:hover .arw{ transform:translateX(3px); }

.eyebrow{
  font-family:var(--monof); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tealink);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:currentColor; opacity:.7; }

.shieldicon{ width:13px; height:13px; flex:none; }

/* ============ Hero ============ */
.hero{ padding-block:clamp(3.5rem,8vw,7rem) clamp(3rem,6vw,5.5rem); }
.hero__grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
@media (min-width:1024px){ .hero__grid{ grid-template-columns:44fr 56fr; } }
.hero__eyebrow{ margin-bottom:1.5rem; }
.hero__title{ font-family:var(--serif); font-size:clamp(3rem,7vw,6rem); line-height:1.0; letter-spacing:-0.01em; }
.hero__sub{ margin-top:1.75rem; font-size:clamp(1.125rem,1.4vw,1.3rem); line-height:1.5;
  color:var(--muted); max-width:40ch; }
.hero__cta{ margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem; }
.os-note{ font-family:var(--monof); font-size:12px; color:var(--muted); margin-top:8px; }

/* ============ Secciones feature (texto + mock) ============ */
.feature__grid{ display:grid; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
@media (min-width:1024px){
  .feature__grid{ grid-template-columns:1fr 1fr; }
  .feature__grid--media-left > .feature__media{ order:-1; }
}
.feature__title{ font-family:var(--serif); font-size:clamp(2.25rem,4vw,3.75rem); line-height:1.06; margin-top:1.5rem; }
.feature__body{ margin-top:1.75rem; display:grid; gap:1.25rem; font-size:1.125rem; line-height:1.6;
  color:var(--muted); max-width:46ch; }
.feature__body .hl{ color:var(--ink); }
.feature__body a{ color:var(--tealink); }

/* ============ Tensión ============ */
.tension{ text-align:center; padding-block:clamp(5rem,12vw,10rem); }
.tension__muted{ font-family:var(--serif); font-size:clamp(1.75rem,3.6vw,2.9rem); line-height:1.28; color:var(--muted); }
.tension__ink{ font-family:var(--serif); font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.22; color:var(--ink); margin-top:2rem; }

/* ============ Lo que no tiene ============ */
.nots{ text-align:center; padding-block:clamp(5rem,11vw,9rem); }
.nots__eyebrow{ justify-content:center; margin-bottom:1.75rem; }
.nots__title{ font-family:var(--serif); font-size:clamp(2.25rem,4.4vw,4rem); line-height:1.05; margin-bottom:2.5rem; }
.nots__list{ font-family:var(--serif); font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1.35; color:var(--ink); display:grid; gap:.25rem; }
.nots__coda{ font-size:1.125rem; color:var(--muted); margin-top:2.5rem; }

/* ============ Comparativa ============ */
.compare__title{ font-family:var(--serif); font-size:clamp(2.25rem,4vw,3.5rem); line-height:1.08;
  margin:1.5rem 0 2.5rem; max-width:20ch; }
.compare__scroll{ overflow-x:auto; margin-inline:-24px; padding-inline:24px; }
.cmp{ width:100%; min-width:880px; border-collapse:collapse; font-family:var(--monof); }
.cmp th,.cmp td{ padding:14px 10px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap; }
.cmp thead th{ font-size:12px; font-weight:500; color:var(--muted); border-bottom:1px solid #D8CCBA; vertical-align:bottom; }
.cmp thead th small{ display:block; font-size:10px; color:#A99F92; font-weight:400; margin-top:3px; }
.cmp th:first-child,.cmp td:first-child{ text-align:left; font-family:var(--sans); color:var(--ink);
  white-space:normal; min-width:180px; font-weight:500; }
.cmp .lean{ background:var(--tealtint); }
.cmp thead th.lean{ color:var(--tealink); font-weight:600; border-bottom-color:var(--teal); }
.yes{ color:var(--tealink); font-weight:600; font-size:15px; }
.no{ color:#BCB2A4; }
.no small,.part small{ display:block; color:#A99F92; font-size:10px; font-weight:400; }
.part{ color:var(--muted); font-size:11.5px; }
.compare__note{ font-family:var(--monof); font-size:12px; color:var(--muted); margin-top:1.5rem; max-width:60ch; }

/* ============ Sostenibilidad / bloques de texto ============ */
.block__title{ font-family:var(--serif); font-size:clamp(2.25rem,4vw,3.5rem); line-height:1.08; margin-top:1.5rem; max-width:18ch; }
.block__body{ margin-top:1.75rem; font-size:1.125rem; line-height:1.6; color:var(--muted); max-width:54ch; }
.block__cta{ margin-top:2rem; display:inline-flex; font-size:16px; }

/* ============ Cierre ============ */
.closing{ position:relative; overflow:hidden; background:var(--teal-deep); color:var(--cream); }
.closing__mark{ position:absolute; right:-40px; bottom:-60px; width:340px; height:340px; opacity:.07; pointer-events:none; }
.closing__inner{ position:relative; text-align:center; padding-block:clamp(5rem,11vw,9rem); }
.closing__title{ font-family:var(--serif); font-size:clamp(2.5rem,5.5vw,5rem); line-height:1.04; max-width:16ch; margin-inline:auto; }
.closing__sub{ font-size:clamp(1.05rem,1.4vw,1.25rem); margin-top:1.5rem; color:rgba(250,247,242,.85); }
.closing__cta{ margin-top:2.25rem; }
.closing .os-note{ color:rgba(250,247,242,.75); margin-top:12px; }

/* ============ Footer ============ */
.site-footer{ background:var(--cream); border-top:1px solid var(--line); }
.site-footer__inner{ padding-block:clamp(3rem,6vw,5rem); }
.site-footer__grid{ display:grid; gap:2.5rem; }
@media (min-width:768px){ .site-footer__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.site-footer__brand p{ font-family:var(--serif); font-size:24px; color:var(--ink); }
.site-footer__ver{ font-family:var(--monof); font-size:12px; color:var(--muted); margin-top:8px; }
.fnav__label{ font-family:var(--monof); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-bottom:1rem; }
.fnav ul{ display:grid; gap:.625rem; font-size:14px; }
.fnav a{ color:var(--muted); text-decoration:none; transition:color .15s; }
.fnav a:hover{ color:var(--ink); }
.site-footer__legal{ font-size:13px; color:var(--muted); margin-top:3rem; padding-top:1.5rem;
  border-top:1px solid var(--line); max-width:72ch; }

/* ============ Página interior (hero corto) ============ */
.page-hero{ padding-block:clamp(3.5rem,8vw,7rem) clamp(2rem,4vw,3rem); }
.page-hero__title{ font-family:var(--serif); font-size:clamp(2.75rem,6vw,5rem); line-height:1.02; margin-top:1.5rem; }
.page-hero__lede{ margin-top:1.75rem; font-size:clamp(1.125rem,1.4vw,1.3rem); line-height:1.5;
  color:var(--muted); max-width:54ch; }

.sub-block{ padding-block:clamp(2.5rem,5vw,4rem); }
.sub-block__title{ font-family:var(--serif); font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.1; margin-bottom:1.5rem; }
.sub-block__body{ font-size:1.0625rem; line-height:1.6; color:var(--muted); max-width:58ch; display:grid; gap:1.1rem; }
.sub-block__body .hl{ color:var(--ink); }

.tri{ display:grid; gap:1.5rem; }
@media (min-width:640px){ .tri{ grid-template-columns:repeat(3,1fr); } }
.tri__item{ border-top:1px solid var(--line); padding-top:1rem; }
.tri__t{ font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.tri__d{ font-size:14px; line-height:1.55; color:var(--muted); }

.dashlist{ display:grid; gap:.85rem; }
.dashlist li{ position:relative; padding-left:1.5rem; color:var(--muted); line-height:1.55; }
.dashlist li::before{ content:'—'; position:absolute; left:0; color:var(--tealink); font-family:var(--monof); }

.pledge{ border:1px dashed #d8cdbd; border-radius:14px; padding:20px 26px;
  font-family:var(--monof); font-size:13.5px; line-height:1.6; color:var(--muted); }
.pledge .hl{ color:var(--ink); }

/* ============ Descargas ============ */
.dl-card{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:24px 26px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.dl-os{ font-weight:600; font-size:1.25rem; color:var(--ink); }
.dl-meta{ font-family:var(--monof); font-size:12px; color:var(--muted); margin-top:6px; }
.dl-right{ text-align:left; }
@media (min-width:640px){ .dl-right{ text-align:right; } }
.dl-soon{ display:flex; gap:14px 26px; flex-wrap:wrap; align-items:center; padding:20px 26px;
  border:1px dashed #d8cdbd; border-radius:14px; margin-top:16px; }
.dl-soon__label{ font-weight:600; color:var(--ink); font-size:14px; }
.dl-soon__os{ color:var(--muted); font-size:14px; }
.dl-soon .lnk{ font-size:14px; }
@media (min-width:640px){ .dl-soon .lnk{ margin-left:auto; } }

/* ============ Donaciones ============ */
.coins{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin-top:2.25rem; }
.coin{ border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:#fff; }
.coin__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.coin__name{ font-weight:600; font-size:1.0625rem; color:var(--ink); }
.coin__tag{ font-family:var(--monof); font-size:11px; color:var(--muted); }
.coin__addr{ display:flex; align-items:stretch; gap:8px; }
.addr{ flex:1 1 auto; min-width:0; font-family:var(--monof); font-size:12px; color:var(--ink);
  background:var(--sand); border:1px solid var(--line); border-radius:6px; padding:9px 11px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy{ flex:none; background:var(--teal); color:#fff; font-weight:600; font-size:13px;
  padding:0 14px; border-radius:6px; border:0; cursor:pointer; font-family:var(--sans);
  transition:background .18s ease; }
.copy:hover{ background:var(--tealdark); }

/* ============================================================
   Browser mock — recreación fiel de la UI real del producto
   ============================================================ */
.browser{
  border:1px solid var(--line);
  border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 40px 84px -42px rgba(40,44,40,.26), 0 12px 30px -18px rgba(40,44,40,.12);
}
.b-strip{
  display:flex; align-items:flex-end; gap:3px; height:44px; padding:8px 10px 0;
  background:#F1ECE4; border-bottom:1px solid var(--line);
}
.b-tabs{ display:flex; align-items:flex-end; gap:3px; min-width:0; flex:0 1 auto; overflow:hidden; }
.b-tab{
  --ctx:#4f83ff; position:relative; display:flex; align-items:center; gap:8px;
  height:36px; padding:0 11px; min-width:96px; flex:1 1 150px; max-width:166px;
  border-radius:10px 10px 0 0; color:var(--muted); font-size:12.5px; font-weight:500;
  overflow:hidden; white-space:nowrap;
}
.b-tab .d{ width:8px; height:8px; border-radius:50%; background:var(--ctx); flex:none; }
.b-tab .t{ overflow:hidden; text-overflow:ellipsis; }
.b-tab .x{ margin-left:auto; color:#b3a999; font-size:13px; flex:none; }
.b-tab:not(.is-active)::after{ content:''; position:absolute; right:-1.5px; top:10px; width:1px; height:16px; background:rgba(26,22,18,.10); }
.b-tab.is-active{ background:#fff; color:var(--ink); }
.b-tab.is-active::after{
  content:''; position:absolute; left:11px; right:11px; bottom:0; height:2.5px;
  background:var(--ctx); border-radius:2px 2px 0 0;
}
.b-add{ display:grid; place-items:center; width:28px; height:30px; color:var(--muted); font-size:17px; flex:none; }

.b-bar{
  display:flex; align-items:center; gap:8px; height:46px; padding:0 12px;
  background:#fff; border-bottom:1px solid var(--line);
}
.b-nav{ display:flex; align-items:center; gap:2px; color:#9a9182; flex:none; }
.b-nav svg{ width:17px; height:17px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.b-nav span{ width:28px; height:28px; display:grid; place-items:center; border-radius:999px; }
.b-nav .off{ color:#cdc3b3; }
.b-omni{
  --ctx:#4f83ff; flex:1 1 auto; min-width:0; display:flex; align-items:center; height:32px;
  padding:0 6px; border-radius:999px; border:1px solid var(--line); background:#F6F1EA;
}
.b-chip{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; flex:none;
  border-radius:999px; background:color-mix(in srgb, var(--ctx) 15%, #fff);
  color:color-mix(in srgb, var(--ctx) 72%, var(--ink)); font-size:11.5px; font-weight:600; white-space:nowrap;
}
.b-chip .d{ width:7px; height:7px; border-radius:50%; background:var(--ctx); }
.b-omni .div{ width:1px; height:16px; background:var(--line); margin:0 9px; flex:none; }
.b-url{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--monof); font-size:12px; color:#6b6358; }
.b-url .sc{ color:#a99f92; }
.b-shield{ display:inline-flex; align-items:center; gap:5px; flex:none; padding-left:8px;
  font-family:var(--monof); font-size:12px; color:var(--tealink); }
.b-shield .shieldicon{ color:var(--tealink); }
.b-tool{ width:28px; height:28px; display:grid; place-items:center; border-radius:999px; color:#9a9182; flex:none; }
.b-tool svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* Viewport = una web real cargada (clara, con vida); popovers claros encima */
.b-view{ position:relative; overflow:hidden; background:#fff; }
.b-site{ padding:26px 30px; }
.b-site__top{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.b-site__logo{ width:30px; height:30px; border-radius:9px; background:linear-gradient(140deg, var(--teal), #34c4b5); }
.b-site__nav{ margin-left:auto; display:flex; gap:14px; align-items:center; }
.b-site__nav i{ width:42px; height:9px; border-radius:5px; background:#ece7df; }
.b-site__title{ height:24px; border-radius:7px; background:#d8d1c5; margin-bottom:13px; }
.b-site__p{ height:9px; border-radius:5px; background:#efeae2; margin-bottom:12px; }
.b-site__img{ position:absolute; right:30px; bottom:26px; width:214px; height:120px; border-radius:14px;
  background:linear-gradient(140deg,#e7f3f1,#d4e7e3 70%,#cfe6df); border:1px solid #e1ece9; }
.b-site::after{ content:''; position:absolute; left:30px; bottom:42px; width:108px; height:33px;
  border-radius:8px; background:var(--teal); box-shadow:0 8px 18px -8px color-mix(in srgb,var(--teal) 55%, transparent); }

/* Popovers del navegador (claros) */
.b-pop{ position:absolute; z-index:3; }
.b-guard{ width:248px; padding:14px 16px; background:#fff; border:1px solid var(--line);
  border-radius:13px; box-shadow:0 26px 54px -22px rgba(40,44,40,.28), 0 4px 10px -5px rgba(40,44,40,.10); }
.b-guard__h{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--monof); font-size:11px; color:var(--muted); margin-bottom:4px; }
.b-guard__h .shieldicon{ color:var(--tealink); }
.b-guard__r{ display:flex; align-items:center; justify-content:space-between; padding:8px 0;
  border-top:1px solid var(--line); font-size:13.5px; color:var(--ink); }
.b-guard__r b{ font-family:var(--monof); font-weight:600; color:var(--tealink); }
.b-guard__f{ margin-top:10px; font-family:var(--monof); font-size:10.5px; color:var(--muted); }

.b-menu{ width:236px; padding:7px; background:#fff; border:1px solid var(--line);
  border-radius:13px; box-shadow:0 26px 54px -22px rgba(40,44,40,.28), 0 4px 10px -5px rgba(40,44,40,.10); }
.b-menu__t{ padding:7px 10px 6px; font-family:var(--monof); font-size:11px; color:var(--muted); }
.b-mi{ --ctx:#4f83ff; display:flex; align-items:center; gap:10px; height:34px; padding:0 10px;
  border-radius:9px; color:var(--ink); font-size:13px; }
.b-mi .d{ width:8px; height:8px; border-radius:50%; background:var(--ctx);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ctx) 18%, transparent); }
.b-mi.hot{ background:color-mix(in srgb,var(--ctx) 12%, #fff); }
.b-mi .k{ margin-left:auto; font-family:var(--monof); font-size:11px; color:var(--muted); }
.b-sep{ height:1px; margin:6px 4px; background:var(--line); }
.b-mi--new{ color:var(--muted); }
.b-mi--new .plus{ position:relative; width:8px; height:8px; flex:none; }
.b-mi--new .plus::before,.b-mi--new .plus::after{ content:''; position:absolute; background:var(--muted); border-radius:1px; }
.b-mi--new .plus::before{ left:0; right:0; top:50%; height:1.4px; margin-top:-0.7px; }
.b-mi--new .plus::after{ top:0; bottom:0; left:50%; width:1.4px; margin-left:-0.7px; }

.b-tab--swap{ --ctx:var(--personal); transition:--ctx .45s ease; cursor:pointer; }
.b-tab--swap:hover{ --ctx:var(--trabajo); color:var(--ink); }
.swap{ display:inline-grid; }
.swap > span{ grid-area:1/1; transition:opacity .3s ease; }
.swap__b{ opacity:0; }
.b-tab--swap:hover .swap__a{ opacity:0; }
.b-tab--swap:hover .swap__b{ opacity:1; }

.shot-cap{ font-family:var(--monof); font-size:11px; color:rgba(99,91,81,.7); margin-top:12px; text-align:center; }

/* ============ Reveal + sticky ============ */
.js .reveal{ opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .reveal.in{ opacity:1; transform:none; }

.sticky-cta{ position:fixed; right:18px; bottom:18px; z-index:50; opacity:0; transform:translateY(12px);
  pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 14px 30px -12px rgba(26,158,148,.55); }
.sticky-cta.show{ opacity:1; transform:none; pointer-events:auto; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .b-tab--swap, .swap > span{ transition:none !important; }
  .lnk .arw{ transition:none !important; }
  .btn{ transition:none !important; }
}