/* BBS Páginas · inicio 1.0.1 (diseño v5.2 «línea moderna») · 2026-10-15 Todo vive bajo #bbs-inicio: no toca el resto del sitio. Las fuentes (Inter y Libre Bodoni) ya las carga el sitio. */ /* el contenedor de Elementor sin relleno, para que las bandas vayan de borde a borde */ .e-con:has(#bbs-inicio),.elementor-widget:has(#bbs-inicio),.elementor-widget-container:has(#bbs-inicio),.elementor-shortcode:has(#bbs-inicio){padding:0!important;margin:0!important;max-width:none!important;--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--content-width:100%} /* ---------- base (heredada de la v3 y podada: solo reglas que la página usa) ---------- */ #bbs-inicio{--navy: #023260; --deep: #1D1F1E; --deep2: #2A2E2C; --graf: #1A1C1B; --graf-c: #343A38; --gold: #EFB810; --gold-ink: #8A6500; --paper: #FAFAF8; --mist: #F2F2EF; --white: #fff; --ink: #1C2321; --muted: #4A524F; --rule: #DCDDD8; --on-dark: #D3D6D1; --dim-dark: #9DA39E; --line-dark: rgba(214,218,212,.13); --sky: #2F5E9E; --sky-d: #8FB8F2; --jade: #2F6B55; --jade-d: #4ADE9B; --red: #C2453A; --red-d: #FF8A7A; --green-d: #4ADE9B; --serif: "Libre Bodoni",Georgia,serif; --sans: "Inter",system-ui,-apple-system,sans-serif; --mono: ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; display: block; width: 100%; overflow-x: clip; text-align: left; letter-spacing: normal; word-spacing: normal; font-family: var(--sans); color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;} #bbs-inicio,#bbs-inicio *{box-sizing: border-box; margin: 0px; padding: 0px;} #bbs-inicio h1,#bbs-inicio h2,#bbs-inicio h3,#bbs-inicio h4,#bbs-inicio p,#bbs-inicio ol,#bbs-inicio ul,#bbs-inicio li,#bbs-inicio figure,#bbs-inicio figcaption,#bbs-inicio small,#bbs-inicio button{color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; font-weight: inherit; list-style: none; border: 0px; background: none;} #bbs-inicio a{color: inherit; text-decoration: none;} #bbs-inicio a:focus-visible,#bbs-inicio button:focus-visible{outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;} #bbs-inicio img{max-width: 100%; display: block;} #bbs-inicio .wrap{max-width: 1240px; margin: 0px auto; padding: 0px 48px;} #bbs-inicio [id]{scroll-margin-top: 140px;} #bbs-inicio h2{font-family: var(--serif); font-weight: 700; font-size: 52px; line-height: 1.06; letter-spacing: -0.012em; color: var(--navy); margin-top: 18px; text-wrap: balance;} #bbs-inicio .live{display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red-d); box-shadow: rgba(255, 138, 122, 0.6) 0px 0px 0px 0px; animation: 1.8s ease-out 0s infinite normal none running bbsi-late; flex: 0 0 auto;} #bbs-inicio .live.off{background: var(--dim-dark); animation: auto ease 0s 1 normal none running none;} #bbs-inicio.js .rv{opacity: 0; transform: translateY(18px); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);} #bbs-inicio.js .rv.in{opacity: 1; transform: none;} #bbs-inicio.js .rv.d1{transition-delay: 0.1s;} #bbs-inicio.js .rv.d2{transition-delay: 0.2s;} #bbs-inicio.js .rv.d3{transition-delay: 0.3s;} #bbs-inicio .hero{position: relative; overflow: hidden; background: linear-gradient(rgb(246, 246, 243) 0%, rgb(237, 237, 233) 100%); padding: 96px 0px 104px;} #bbs-inicio .hero::after{content: ""; position: absolute; inset: auto 0px 0px; height: 1px; background: var(--rule);} #bbs-inicio .hero h1{font-family: var(--serif); font-weight: 700; font-size: 66px; line-height: 1.03; letter-spacing: -0.02em; color: var(--navy); margin-top: 22px; text-wrap: balance;} @keyframes bbsi-aura { 100% { transform: translate3d(-3%, 2%, 0px) scale(1.06); } } #bbs-inicio .term{position: relative; border-radius: 16px; background: radial-gradient(120% 90% at 50% 45%, rgb(52, 58, 56) 0%, rgb(38, 42, 40) 45%, rgb(26, 28, 27) 100%); color: var(--on-dark); box-shadow: rgba(20, 22, 21, 0.7) 0px 50px 90px -40px, rgba(214, 218, 212, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.05) 0px 1px 0px inset; overflow: hidden;} #bbs-inicio .term-h{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-dark); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--dim-dark);} #bbs-inicio .term-h .st{display: flex; align-items: center; gap: 8px; color: var(--on-dark); white-space: nowrap;} #bbs-inicio .term-h .px{display: flex; white-space: nowrap; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums;} #bbs-inicio .term-h .px b{font-size: 17px; font-weight: 600; color: var(--white); letter-spacing: 0px;} #bbs-inicio .term-h .px i{font-style: normal; font-size: 12px; color: var(--green-d);} #bbs-inicio .term-h .px i.dn{color: var(--red-d);} #bbs-inicio .term-chart{position: relative; height: 390px;} #bbs-inicio .term-chart canvas{position: absolute; inset: 0px; width: 100%; height: 100%;} #bbs-inicio .term-f{padding: 14px 18px 16px; border-top: 1px solid var(--line-dark);} #bbs-inicio .pasos{list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0px; padding: 0px;} #bbs-inicio .pasos li{position: relative; padding-top: 10px; font-size: 12px; line-height: 1.25; color: var(--dim-dark); transition: color 0.4s;} #bbs-inicio .pasos li i{position: absolute; left: 0px; right: 0px; top: 0px; height: 3px; border-radius: 2px; background: rgba(201, 212, 225, 0.14); overflow: hidden;} #bbs-inicio .pasos li i::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg,var(--sky-d),var(--gold)); transform-origin: left center; transform: scaleX(var(--k,0));} #bbs-inicio .pasos li b{display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 13px; color: inherit;} #bbs-inicio .pasos li.on{color: var(--white);} #bbs-inicio .pasos li.on b{color: var(--gold);} #bbs-inicio .term-f .cap{margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--white); min-height: 1.35em; transition: opacity 0.35s;} #bbs-inicio .term-f .cap.fx{opacity: 0;} #bbs-inicio .tool{--c: var(--gold); --cbg: rgba(239,184,16,.12); display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, border-color 0.35s;} #bbs-inicio .tool:hover{transform: translateY(-4px); box-shadow: rgba(20, 22, 21, 0.4) 0px 26px 50px -30px; border-color: var(--c);} #bbs-inicio .tool.t-map{--c: #2F5E9E; --cbg: rgba(47,94,158,.10);} #bbs-inicio .tool.t-bt{--c: #8A6500; --cbg: rgba(239,184,16,.14);} #bbs-inicio .tool.t-val{--c: #2F6B55; --cbg: rgba(47,107,85,.11);} #bbs-inicio .tool.t-bm{--c: #5B3FA6; --cbg: rgba(91,63,166,.10);} #bbs-inicio .tool.t-lab{--c: #A8335F; --cbg: rgba(168,51,95,.09);} #bbs-inicio .tool .lam{position: relative; background: radial-gradient(110% 120% at 50% 40%, rgb(52, 58, 56) 0%, rgb(35, 38, 37) 60%, rgb(26, 28, 27) 100%); padding: 16px 14px 12px; border-bottom: 3px solid var(--c);} #bbs-inicio .tool .lam svg{display: block; width: 100%; height: auto; overflow: visible;} #bbs-inicio .tool .tx{display: flex; flex-direction: column; padding: 24px 26px 28px;} #bbs-inicio .tool .tag{align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); background: var(--cbg); padding: 6px 10px; border-radius: 99px;} #bbs-inicio .tool h3{font-family: var(--serif); font-weight: 700; font-size: 25px; line-height: 1.15; color: var(--navy); margin-top: 16px;} #bbs-inicio .tool p{color: var(--muted); font-size: 16px; margin-top: 10px;} #bbs-inicio .tool svg text{font-family: var(--mono); font-size: 12px; fill: rgb(211, 214, 209); text-anchor: end;} #bbs-inicio .tool svg .ln{fill: none; stroke: rgb(255, 255, 255); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420;} #bbs-inicio .tool.in svg .ln{animation: 2.2s cubic-bezier(0.5, 0, 0.2, 1) 0.3s 1 normal forwards running bbsi-dibuja;} @keyframes bbsi-dibuja { 100% { stroke-dashoffset: 0; } } #bbs-inicio .t-map .bands rect{opacity: 0.32; transform-box: fill-box; transform: scaleX(0); transform-origin: left center;} #bbs-inicio .t-map.in .bands rect{animation: 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0s 1 normal forwards running bbsi-barra;} #bbs-inicio .t-map.in .bands rect:nth-child(2){animation-delay: 0.15s;} #bbs-inicio .t-map.in .bands rect:nth-child(3){animation-delay: 0.3s;} #bbs-inicio .t-map.in .bands rect:nth-child(4){animation-delay: 0.45s;} @keyframes bbsi-barra { 100% { transform: none; } } #bbs-inicio .t-map .lbl text{font-size: 12px;} #bbs-inicio .t-bt .lv path{stroke-width: 1.4; opacity: 0.55; stroke-dasharray: 260; stroke-dashoffset: 260;} #bbs-inicio .t-bt .bub circle{opacity: 0.85; transform-box: fill-box; transform-origin: center center; transform: scale(0);} #bbs-inicio .t-bt.in .bub circle{animation: 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0s 1 normal forwards running bbsi-pop;} #bbs-inicio .t-bt.in .bub circle:nth-child(2){animation-delay: 0.45s;} #bbs-inicio .t-bt.in .bub circle:nth-child(3){animation-delay: 0.9s;} #bbs-inicio .t-bt.in .lv path{animation: 1.2s ease 0.3s 1 normal forwards running bbsi-dibuja;} #bbs-inicio .t-bt.in .lv path:nth-child(2){animation-delay: 0.75s;} #bbs-inicio .t-bt.in .lv path:nth-child(3){animation-delay: 1.2s;} @keyframes bbsi-pop { 100% { transform: none; } } #bbs-inicio .t-bt .cap{opacity: 0;} #bbs-inicio .t-bt.in .cap{animation: 0.5s ease 1.6s 1 normal forwards running bbsi-ap;} #bbs-inicio .t-bt .cap rect{fill: rgb(26, 28, 27); stroke: rgb(239, 184, 16); stroke-width: 1.2;} #bbs-inicio .t-bt .cap text{fill: rgb(239, 184, 16); font-weight: 700; text-anchor: middle;} @keyframes bbsi-ap { 100% { opacity: 1; } } #bbs-inicio .t-val .bars rect{fill: rgb(143, 184, 242); opacity: 0.35; transform-box: fill-box; transform: scaleX(0); transform-origin: left center;} #bbs-inicio .t-val .bars rect.va{fill: rgb(74, 222, 155); opacity: 0.55;} #bbs-inicio .t-val .bars rect.poc{fill: rgb(239, 184, 16); opacity: 1;} #bbs-inicio .t-val.in .bars rect{animation: 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0s 1 normal forwards running bbsi-barra;} #bbs-inicio .t-val .br{opacity: 0;} #bbs-inicio .t-val.in .br{animation: 0.5s ease 1.1s 1 normal forwards running bbsi-ap;} #bbs-inicio .t-val .br path{fill: none; stroke: rgb(74, 222, 155); stroke-width: 1.4;} #bbs-inicio .t-bm .hm rect{fill: url("#bbsi-hm");} #bbs-inicio .t-bm.in .hm rect{animation: 3.2s ease-in-out 0s infinite alternate none running bbsi-late2;} #bbs-inicio .t-bm.in .hm rect:nth-child(2n+1){animation-delay: -1.4s;} @keyframes bbsi-late2 { 0% { opacity: 0.55; } 100% { opacity: 1; } } #bbs-inicio .t-bm .nv path{stroke: rgb(185, 164, 255); stroke-width: 1.3; stroke-dasharray: 5, 4; opacity: 0;} #bbs-inicio .t-bm.in .nv path{animation: 0.6s ease 0.9s 1 normal forwards running bbsi-ap;} #bbs-inicio .t-lab .gh{fill: none; stroke: rgb(211, 214, 209); stroke-width: 1.4; stroke-dasharray: 3, 4; opacity: 0.35;} #bbs-inicio .t-lab .zn{stroke: rgb(242, 127, 168); stroke-width: 6; opacity: 0.25;} #bbs-inicio .t-lab .ph{stroke: rgb(239, 184, 16); stroke-width: 1.2;} #bbs-inicio .t-lab .q rect{fill: rgb(74, 222, 155); opacity: 0.9;} #bbs-inicio .t-lab .q rect.o{fill: none; stroke: rgb(211, 214, 209); opacity: 0.6;} #bbs-inicio .t-lab .q text{text-anchor: middle; font-family: var(--sans); font-weight: 600; font-size: 12px;} #bbs-inicio .t-lab .q text:first-of-type{fill: rgb(6, 40, 26);} #bbs-inicio .t-lab .q{opacity: 0;} #bbs-inicio .t-lab.in .q{animation: 0.5s ease 2.3s 1 normal forwards running bbsi-ap;} #bbs-inicio .clock{display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: 99px; padding: 9px 16px;} #bbs-inicio .clock b{color: var(--white); font-weight: 600;} #bbs-inicio .vids{display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 52px; align-items: start;} #bbs-inicio .vids .side{display: grid; gap: 20px;} #bbs-inicio .vid{position: relative; display: block; width: 100%; border-radius: 10px; overflow: hidden; background: rgb(0, 0, 0); aspect-ratio: 16 / 9; cursor: pointer; border: 1px solid var(--line-dark); text-align: left;} #bbs-inicio .vid img{position: absolute; left: 0px; top: -16.67%; width: 100%; height: 133.34%; object-fit: cover; transform: scale(1.002); transition: transform 0.6s, opacity 0.4s; opacity: 0.86;} #bbs-inicio .vid:hover img{transform: scale(1.035); opacity: 1;} #bbs-inicio .vid .pl{position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0px 0px -34px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; box-shadow: rgba(0, 0, 0, 0.6) 0px 10px 30px -8px; transition: transform 0.3s;} #bbs-inicio .vid:hover .pl{transform: scale(1.08);} #bbs-inicio .vid .pl::before{content: ""; margin-left: 5px; border-left: 20px solid rgb(30, 22, 2); border-top: 12px solid transparent; border-bottom: 12px solid transparent;} #bbs-inicio .vid .cap{position: absolute; left: 0px; right: 0px; bottom: 0px; padding: 44px 18px 14px; background: linear-gradient(transparent, rgba(5, 12, 24, 0.92)); color: var(--white); font-size: 15px; font-weight: 600; line-height: 1.35;} #bbs-inicio .vid .cap small{display: block; font-size: 12px; font-weight: 500; color: var(--dim-dark); letter-spacing: 0.06em; margin-top: 4px;} #bbs-inicio .vid iframe{position: absolute; inset: 0px; width: 100%; height: 100%; border: 0px;} #bbs-inicio .vids .side .vid .cap{font-size: 14px;} @keyframes bbsi-barrido { 0%, 55% { background-position: -60% 0px; } 100% { background-position: 160% 0px; } } @keyframes bbsi-zona { 0%, 100% { opacity: 0.25; } 12%, 40% { opacity: 1; } 55% { opacity: 0.25; } } @keyframes bbsi-dot { 0% { opacity: 1; transform: scale(1); } 70% { opacity: 0.35; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes bbsi-flecha { 0%, 60%, 100% { transform: none; } 75% { transform: translateX(5px); } } @keyframes bbsi-late { 0% { box-shadow: rgba(255, 138, 122, 0.55) 0px 0px 0px 0px; } 70% { box-shadow: rgba(255, 138, 122, 0) 0px 0px 0px 9px; } 100% { box-shadow: rgba(255, 138, 122, 0) 0px 0px 0px 0px; } } @keyframes bbsi-tin { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce){ #bbs-inicio *{animation: auto ease 0s 1 normal none running none !important; transition: none !important;} #bbs-inicio.js .rv{opacity: 1; transform: none;} } @media (max-width: 380px){ #bbs-inicio .term-h .px i{display: none;} } @media (max-width: 1100px){ #bbs-inicio .hero h1{font-size: 58px;} #bbs-inicio .vids{grid-template-columns: 1fr;} #bbs-inicio .vids .side{grid-template-columns: 1fr 1fr;} } @media (max-width: 700px){ #bbs-inicio{font-size: 16px;} #bbs-inicio .wrap{padding: 0px 20px;} #bbs-inicio .hero{padding: 56px 0px 64px;} #bbs-inicio .hero h1{font-size: 42px; line-height: 1.05;} #bbs-inicio h2{font-size: 34px;} #bbs-inicio .term-chart{height: 300px;} #bbs-inicio .pasos li span{display: none;} #bbs-inicio .term-f .cap{font-size: 16px; min-height: 2.7em;} #bbs-inicio .term-h .px b{font-size: 15px;} #bbs-inicio .term-h{padding: 12px 14px; font-size: 12px; letter-spacing: 0.02em;} #bbs-inicio .term-h .lg2{display: none;} #bbs-inicio .vids .side{grid-template-columns: 1fr;} } /* ===== v5 · línea moderna (ideas de producto tipo fintech): sans grande, sin cajas, producto al frente ===== */ #bbs-inicio.v5{--paper:#FCFBF8;--alt:#F5F3EE;--white:#fff;--ink:#0B1B2E;--body:#3B4656;--soft:#5A6474;--rule:#E7E3DA; --navy:#0F2D4F;--navy2:#163C66;--gold:#C29A43;--gold-ink:#7A5B12;--gold-lt:#E3C27A; --deep:#0B1626;--on-dark:#D9DEE6;--dim-dark:#AEB6C2;--line-dark:rgba(217,222,230,.12); --sans:"Inter",system-ui,-apple-system,sans-serif; background:var(--paper);color:var(--body);font-size:17px;line-height:1.6;font-feature-settings:"ss01","cv11"} #bbs-inicio.v5 .wrap{max-width:1200px;padding:0 40px} #bbs-inicio.v5 h1,#bbs-inicio.v5 h2,#bbs-inicio.v5 h3,#bbs-inicio.v5 h4{font-family:var(--sans);color:var(--ink);text-wrap:balance} #bbs-inicio.v5 .ar{display:inline-block;transition:transform .25s ease} #bbs-inicio.v5 a:hover .ar{transform:translateX(4px)} /* botones píldora */ #bbs-inicio.v5 .pill{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;background:var(--navy);color:#fff;font-weight:600;font-size:16px;letter-spacing:-.005em;transition:background .2s,box-shadow .2s} #bbs-inicio.v5 .pill:hover{background:var(--navy2);box-shadow:0 8px 22px -10px rgba(15,45,79,.6)} #bbs-inicio.v5 .pill.ghost{background:transparent;color:var(--navy);padding:0 6px} #bbs-inicio.v5 .pill.ghost:hover{box-shadow:none;background:transparent} #bbs-inicio.v5 .x-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--navy);font-size:16px} #bbs-inicio.v5 .x-eye{display:block;font-size:15px;font-weight:600;color:var(--gold-ink);letter-spacing:-.005em} #bbs-inicio.v5 .x-note{font-size:14px;color:var(--soft);margin-top:22px;max-width:52em} /* ---------- héroe ---------- */ #bbs-inicio.v5 .x-hero{background:var(--paper);padding:96px 0 120px;overflow:hidden} #bbs-inicio.v5 .x-hero::after{display:none} #bbs-inicio.v5 .mesh{position:absolute;inset:0;clip-path:polygon(52% 0,100% 0,100% 100%,66% 100%);overflow:hidden;background:#EDE6D6} #bbs-inicio.v5 .mesh i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.9;animation:x-flota 18s ease-in-out infinite alternate} #bbs-inicio.v5 .mesh .b1{width:620px;height:620px;right:-120px;top:-180px;background:#0F2D4F} #bbs-inicio.v5 .mesh .b2{width:520px;height:520px;right:260px;top:120px;background:#D7B261;animation-delay:-6s} #bbs-inicio.v5 .mesh .b3{width:460px;height:460px;right:-60px;bottom:-200px;background:#6F93C4;animation-delay:-11s} #bbs-inicio.v5 .mesh .b4{width:360px;height:360px;right:420px;bottom:-160px;background:#F3E3BC;animation-delay:-3s} @keyframes x-flota{to{transform:translate3d(-60px,40px,0) scale(1.12)}} #bbs-inicio.v5 .x-hero-g{position:relative;display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center} #bbs-inicio.v5 .x-ann{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;background:#fff;border:1px solid var(--rule);font-size:14px;font-weight:500;color:var(--ink);box-shadow:0 2px 6px -3px rgba(11,27,46,.12)} #bbs-inicio.v5 .x-ann .dot{width:8px;height:8px;border-radius:50%;background:#2E9E6A;box-shadow:0 0 0 4px rgba(46,158,106,.15)} #bbs-inicio.v5 .x-hero h1{font-weight:600;font-size:68px;line-height:1.02;letter-spacing:-.045em;margin-top:26px;color:var(--ink)} #bbs-inicio.v5 .x-hero h1 .grad{display:block;background:linear-gradient(92deg,#0F2D4F 0%,#3B5F8C 45%,#9A7322 100%);-webkit-background-clip:text;background-clip:text;color:transparent} #bbs-inicio.v5 .x-lead{font-size:20px;line-height:1.55;color:var(--body);margin-top:24px;max-width:31em} #bbs-inicio.v5 .x-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:34px} #bbs-inicio.v5 .x-stage{position:relative;padding:58px 0 150px 24px} #bbs-inicio.v5 .term{border-radius:14px;background:linear-gradient(180deg,#1A1E25,#12151A);box-shadow:0 50px 100px -30px rgba(11,22,38,.55),0 30px 60px -40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)} #bbs-inicio.v5 .term-chart{height:360px} #bbs-inicio.v5 .pasos li b{font-family:var(--sans);font-style:normal;font-weight:600;font-size:13px} #bbs-inicio.v5 .pasos li{font-size:13px;color:#BFC6D0} #bbs-inicio.v5 .term-f .cap{font-family:var(--sans);font-style:normal;font-weight:500;font-size:16px;letter-spacing:-.01em} #bbs-inicio.v5 .float{position:absolute;background:#fff;border-radius:12px;box-shadow:0 30px 60px -20px rgba(11,27,46,.35),0 0 0 1px rgba(11,27,46,.06);color:var(--ink)} #bbs-inicio.v5 .f1{left:-36px;bottom:-22px;width:270px;padding:14px 16px 12px;animation:x-sube 7s ease-in-out infinite alternate} #bbs-inicio.v5 .f1 .fh{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:8px} #bbs-inicio.v5 .f1 .fh em{font-style:normal;color:var(--soft);font-weight:500} #bbs-inicio.v5 .fz{display:grid;grid-template-columns:96px 1fr 38px;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #F0EDE6;font-size:13px} #bbs-inicio.v5 .fz b{font-weight:500;color:var(--body)} #bbs-inicio.v5 .fz em{font-style:normal;font-weight:600;text-align:right;font-variant-numeric:tabular-nums} #bbs-inicio.v5 .fz .bar{height:6px;border-radius:9px;background:#EFEBE2;overflow:hidden} #bbs-inicio.v5 .fz .bar i{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#0F2D4F,#C29A43)} #bbs-inicio.v5 .f1 .fn{font-size:12px;color:var(--soft);margin-top:6px} #bbs-inicio.v5 .f2{right:-18px;top:0;display:flex;align-items:center;gap:12px;padding:12px 16px;animation:x-sube 8s -3s ease-in-out infinite alternate} #bbs-inicio.v5 .f2 b{display:block;font-size:14px;font-weight:600} #bbs-inicio.v5 .f2 span{display:block;font-size:13px;color:var(--soft)} @keyframes x-sube{to{transform:translateY(-10px)}} /* ---------- franja de plataformas ---------- */ #bbs-inicio.v5 .x-logos{background:var(--paper);padding:34px 0 30px;border-top:1px solid var(--rule)} #bbs-inicio.v5 .x-logos p{font-size:14px;color:var(--soft);text-align:center} #bbs-inicio.v5 .x-logos ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 64px;margin-top:16px} #bbs-inicio.v5 .x-logos li{font-size:22px;font-weight:600;letter-spacing:-.03em;color:#6B7380} /* ---------- secciones ---------- */ #bbs-inicio.v5 .x-sec{padding:120px 0} #bbs-inicio.v5 .x-head{max-width:760px} #bbs-inicio.v5 .x-head h2,#bbs-inicio.v5 .x-sec h2{font-weight:600;font-size:50px;line-height:1.06;letter-spacing:-.04em;margin-top:14px;color:var(--ink)} #bbs-inicio.v5 .x-head p{font-size:20px;line-height:1.55;color:var(--body);margin-top:20px} /* camino: tres columnas sin cajas, con regla superior */ #bbs-inicio.v5 .x-path{background:var(--paper);border-top:1px solid var(--rule)} #bbs-inicio.v5 .x-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:72px;counter-reset:s} #bbs-inicio.v5 .x-steps>li{position:relative;padding-top:26px;border-top:1px solid var(--rule)} #bbs-inicio.v5 .x-steps>li::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--gold)} #bbs-inicio.v5 .x-steps .k{display:flex;align-items:center;justify-content:space-between;font-size:14px} #bbs-inicio.v5 .x-steps .k span{font-weight:600;color:var(--gold-ink);font-variant-numeric:tabular-nums} #bbs-inicio.v5 .x-steps .k em{font-style:normal;font-weight:500;color:var(--soft)} #bbs-inicio.v5 .x-steps h3{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-top:18px} #bbs-inicio.v5 .x-steps p{font-size:17px;color:var(--body);margin-top:10px} #bbs-inicio.v5 .x-steps ul{margin:20px 0 22px;display:grid;gap:9px} #bbs-inicio.v5 .x-steps ul li{position:relative;padding-left:26px;font-size:16px;color:var(--body)} #bbs-inicio.v5 .x-steps ul li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg)} /* herramientas: bento */ #bbs-inicio.v5 .x-tools{background:var(--alt)} #bbs-inicio.v5 .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px} #bbs-inicio.v5 .bento .tool{display:flex;flex-direction:column;background:#fff;border:0;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(11,27,46,.06),0 0 0 1px rgba(11,27,46,.05);transition:transform .3s ease,box-shadow .3s ease} #bbs-inicio.v5 .bento .tool:hover{transform:translateY(-3px);box-shadow:0 24px 48px -24px rgba(11,27,46,.3),0 0 0 1px rgba(11,27,46,.06)} #bbs-inicio.v5 .bento .b-wide{grid-column:span 2;flex-direction:row} #bbs-inicio.v5 .bento .b-wide .lam{flex:1.15;display:flex;align-items:center} #bbs-inicio.v5 .bento .b-wide .tx{flex:1;justify-content:center;padding:36px} #bbs-inicio.v5 .bento .lam{background:linear-gradient(180deg,#1A1E25,#12151A);border-bottom:0;padding:22px 20px 16px} #bbs-inicio.v5 .bento .tx{padding:24px 26px 28px} #bbs-inicio.v5 .bento .tag{background:none;padding:0;border:0;color:var(--gold-ink);font-size:14px;font-weight:600;letter-spacing:-.005em;text-transform:none} #bbs-inicio.v5 .bento h3{font-size:22px;font-weight:600;letter-spacing:-.025em;margin-top:8px;color:var(--ink);font-family:var(--sans)} #bbs-inicio.v5 .bento .b-wide h3{font-size:28px} #bbs-inicio.v5 .bento p{font-size:16px;color:var(--body);margin-top:8px} #bbs-inicio.v5 .x-manual{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;padding:24px 28px;border-radius:16px;background:var(--ink);color:#D9DEE6;font-size:17px} #bbs-inicio.v5 .x-manual b{color:#fff} #bbs-inicio.v5 .x-manual .pill{background:#fff;color:var(--navy);flex:none} /* banda oscura */ #bbs-inicio.v5 .x-dark{position:relative;overflow:hidden;background:var(--deep);color:var(--on-dark);padding:120px 0} #bbs-inicio.v5 .x-dark .glow{position:absolute;width:900px;height:900px;left:50%;top:-560px;margin-left:-450px;border-radius:50%;background:radial-gradient(closest-side,rgba(194,154,67,.22),rgba(63,98,148,.18) 55%,transparent);pointer-events:none} #bbs-inicio.v5 .x-dark .wrap{position:relative} #bbs-inicio.v5 .x-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;max-width:none} #bbs-inicio.v5 .x-head-row>div:first-child{max-width:720px} #bbs-inicio.v5 .x-dark .x-eye{color:var(--gold-lt)} #bbs-inicio.v5 .x-dark h2{color:#fff;font-weight:600;font-size:50px;line-height:1.06;letter-spacing:-.04em;margin-top:14px} #bbs-inicio.v5 .x-dark .x-head p{color:var(--on-dark)} #bbs-inicio.v5 .x-dark .x-note{color:var(--dim-dark)} #bbs-inicio.v5 .clock{font-size:14px;flex:none} #bbs-inicio.v5 .vid{border-radius:14px;border:1px solid var(--line-dark)} #bbs-inicio.v5 .vid .pl{background:rgba(255,255,255,.95)} #bbs-inicio.v5 .vid .pl::before{border-left-color:var(--navy)} #bbs-inicio.v5 .vid .cap{font-size:16px;letter-spacing:-.01em} #bbs-inicio.v5 .vid .cap small{font-size:13px;color:#C9D0DA;letter-spacing:0} #bbs-inicio.v5 .vids .side .vid .cap{font-size:15px} #bbs-inicio.v5 .x-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;border-top:1px solid var(--line-dark)} #bbs-inicio.v5 .x-stats>div{padding:30px 24px 0 0} #bbs-inicio.v5 .x-stats>div+div{padding-left:28px;border-left:1px solid var(--line-dark)} #bbs-inicio.v5 .x-stats b{display:block;font-size:64px;font-weight:600;letter-spacing:-.05em;line-height:1;color:#fff;font-variant-numeric:tabular-nums} #bbs-inicio.v5 .x-stats dd{margin-top:12px;font-size:16px;color:var(--on-dark)} /* elite */ #bbs-inicio.v5 .x-elite{background:var(--paper)} #bbs-inicio.v5 .x-elite-g{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:start} #bbs-inicio.v5 .x-p{font-size:19px;line-height:1.6;color:var(--body);margin-top:20px} #bbs-inicio.v5 .x-elite blockquote{margin-top:24px;padding-left:18px;border-left:2px solid var(--gold);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.35} #bbs-inicio.v5 .x-when{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:32px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} #bbs-inicio.v5 .x-when>div{padding:16px 28px 16px 0} #bbs-inicio.v5 .x-when>div+div{padding-left:28px;border-left:1px solid var(--rule)} #bbs-inicio.v5 .x-when dt{font-size:14px;color:var(--soft)} #bbs-inicio.v5 .x-when dd{font-size:17px;font-weight:600;color:var(--ink);margin-top:2px} #bbs-inicio.v5 .x-req{font-size:15px;color:var(--soft);margin-top:20px} #bbs-inicio.v5 .x-req b{color:var(--ink);font-weight:600} #bbs-inicio.v5 .x-perks{display:grid;grid-template-columns:1fr 1fr;gap:40px 36px;padding-top:8px} #bbs-inicio.v5 .x-perks li:first-child{grid-column:span 2;padding-bottom:36px;border-bottom:1px solid var(--rule)} #bbs-inicio.v5 .x-perks svg{width:28px;height:28px;display:block} #bbs-inicio.v5 .x-perks svg{fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #bbs-inicio.v5 .x-perks svg .icf{fill:var(--navy);stroke:none} #bbs-inicio.v5 .x-perks svg .icg{stroke:var(--gold)} #bbs-inicio.v5 .x-perks h4{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:14px} #bbs-inicio.v5 .x-perks p{font-size:16px;color:var(--body);margin-top:6px} /* clase gratis */ #bbs-inicio.v5 .x-trial{background:var(--alt);padding-top:110px} #bbs-inicio.v5 .x-card{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:56px;border-radius:20px;background:#fff;box-shadow:0 1px 2px rgba(11,27,46,.06),0 0 0 1px rgba(11,27,46,.05),0 40px 80px -50px rgba(11,27,46,.35)} #bbs-inicio.v5 .x-card h2{font-size:44px} #bbs-inicio.v5 .x-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} #bbs-inicio.v5 .x-meta li{font-size:15px;font-weight:500;color:var(--ink);padding:7px 14px;border-radius:999px;background:var(--alt)} #bbs-inicio.v5 .x-days-h{display:flex;justify-content:space-between;font-size:14px;color:var(--soft);padding-bottom:10px;border-bottom:1px solid var(--rule)} #bbs-inicio.v5 .x-days a{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:16px;padding:20px 4px;border-bottom:1px solid var(--rule);transition:background .2s,padding .2s} #bbs-inicio.v5 .x-days a:hover{background:var(--alt);padding-left:14px;padding-right:14px} #bbs-inicio.v5 .x-days b{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)} #bbs-inicio.v5 .x-days span{font-size:16px;color:var(--body)} #bbs-inicio.v5 .x-days i{font-style:normal;color:var(--navy);font-weight:600} #bbs-inicio.v5 .x-alt{font-size:15px;color:var(--soft);margin-top:20px} #bbs-inicio.v5 .x-alt a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px} #bbs-inicio.v5 .x-portal{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px;font-size:17px;color:var(--body)} #bbs-inicio.v5 .x-portal b{color:var(--ink)} /* ---------- responsive ---------- */ @media (max-width:1100px){ #bbs-inicio.v5 .x-hero-g{grid-template-columns:1fr;gap:56px} #bbs-inicio.v5 .mesh{clip-path:polygon(0 58%,100% 44%,100% 100%,0 100%)} #bbs-inicio.v5 .f1{left:-12px} #bbs-inicio.v5 .x-elite-g{grid-template-columns:1fr;gap:56px} #bbs-inicio.v5 .bento{grid-template-columns:1fr 1fr} } @media (max-width:760px){ #bbs-inicio.v5 .wrap{padding:0 20px} #bbs-inicio.v5 .x-hero{padding:56px 0 72px} #bbs-inicio.v5 .x-hero h1{font-size:44px;letter-spacing:-.04em} #bbs-inicio.v5 .x-lead{font-size:18px} #bbs-inicio.v5 .x-ann{font-size:13px} #bbs-inicio.v5 .term-chart{height:280px} #bbs-inicio.v5 .x-stage{padding:44px 0 0}#bbs-inicio.v5 .f1{position:relative;left:auto;bottom:auto;width:auto;margin:14px 0 0;animation:none} #bbs-inicio.v5 .f2{right:10px;top:-14px;padding:10px 12px} #bbs-inicio.v5 .x-logos ul{gap:10px 28px} #bbs-inicio.v5 .x-logos li{font-size:17px} #bbs-inicio.v5 .x-sec,#bbs-inicio.v5 .x-dark{padding:80px 0} #bbs-inicio.v5 .x-head h2,#bbs-inicio.v5 .x-sec h2,#bbs-inicio.v5 .x-dark h2{font-size:36px} #bbs-inicio.v5 .x-head p{font-size:18px} #bbs-inicio.v5 .x-steps{grid-template-columns:1fr;gap:44px;margin-top:48px} #bbs-inicio.v5 .bento{grid-template-columns:1fr;margin-top:44px} #bbs-inicio.v5 .bento .b-wide{grid-column:auto;flex-direction:column} #bbs-inicio.v5 .bento .b-wide .tx{padding:24px 26px 28px} #bbs-inicio.v5 .x-manual,#bbs-inicio.v5 .x-portal{flex-direction:column;align-items:flex-start} #bbs-inicio.v5 .x-head-row{flex-direction:column;align-items:flex-start} #bbs-inicio.v5 .x-stats{grid-template-columns:1fr 1fr} #bbs-inicio.v5 .x-stats>div:nth-child(3){border-left:0;padding-left:0} #bbs-inicio.v5 .x-stats b{font-size:48px} #bbs-inicio.v5 .x-when{grid-template-columns:1fr;border-bottom:0} #bbs-inicio.v5 .x-when>div,#bbs-inicio.v5 .x-when>div+div{padding:12px 0;border-left:0;border-bottom:1px solid var(--rule)} #bbs-inicio.v5 .x-perks{grid-template-columns:1fr} #bbs-inicio.v5 .x-perks li:first-child{grid-column:auto} #bbs-inicio.v5 .x-card{grid-template-columns:1fr;gap:40px;padding:32px 22px} #bbs-inicio.v5 .x-card h2{font-size:32px} #bbs-inicio.v5 .x-days a{grid-template-columns:84px 1fr auto;gap:10px} #bbs-inicio.v5 .x-days b{font-size:18px} #bbs-inicio.v5 .x-days span{font-size:15px} } @media (prefers-reduced-motion:reduce){#bbs-inicio.v5 .mesh i,#bbs-inicio.v5 .float{animation:none}} /* ---------- fondo en movimiento (v5.1): seda de color que fluye, sin corte duro ---------- */ #bbs-inicio.v5 .x-flow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 70% at 85% 20%,#3B5F8C 0%,transparent 70%),radial-gradient(50% 60% at 70% 70%,#D9B86A 0%,transparent 70%),radial-gradient(60% 60% at 100% 90%,#8FB0DA 0%,transparent 70%),#F3EBDA; -webkit-mask-image:linear-gradient(98deg,transparent 30%,rgba(0,0,0,.55) 46%,#000 64%),linear-gradient(180deg,#000 72%,transparent 100%); -webkit-mask-composite:source-in;mask-image:linear-gradient(98deg,transparent 30%,rgba(0,0,0,.55) 46%,#000 64%),linear-gradient(180deg,#000 72%,transparent 100%);mask-composite:intersect} #bbs-inicio.v5 .x-flow canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease} #bbs-inicio.v5 .x-flow canvas.on{opacity:1} @media (max-width:1100px){#bbs-inicio.v5 .x-flow{-webkit-mask-image:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.6) 50%,#000 66%);mask-image:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.6) 50%,#000 66%);-webkit-mask-composite:source-over;mask-composite:add}} /* ---------- Elite (v5.2): seda champán y oro, muy sutil, detrás de los beneficios ---------- */ #bbs-inicio.v5 .x-elite{position:relative;overflow:hidden;border-top:1px solid var(--rule)} #bbs-inicio.v5 .x-elite .wrap{position:relative;z-index:1} #bbs-inicio.v5 .x-flow-e{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 60% at 80% 45%,#F2E7CF 0%,transparent 70%); -webkit-mask-image:radial-gradient(75% 85% at 78% 45%,#000 30%,transparent 78%);mask-image:radial-gradient(75% 85% at 78% 45%,#000 30%,transparent 78%)} #bbs-inicio.v5 .x-flow-e canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease} #bbs-inicio.v5 .x-flow-e canvas.on{opacity:1} @media (max-width:1100px){#bbs-inicio.v5 .x-flow-e{-webkit-mask-image:radial-gradient(90% 55% at 60% 72%,#000 25%,transparent 80%);mask-image:radial-gradient(90% 55% at 60% 72%,#000 25%,transparent 80%)}} /* 1.0.1: el tema del sitio pone las citas en cursiva; aquí van rectas, como en el diseño */ #bbs-inicio.v5 blockquote{font-style:normal;quotes:none} #bbs-inicio.v5 blockquote::before,#bbs-inicio.v5 blockquote::after{content:none}