/* BAW 212 · Borragán Automoción · 3.1.0 · CSS blindado para convivir con el tema (generado por herramientas/empaquetar.mjs; no editar aquí) */
.bf:not(#b212-x) { --bf-noche: #0B0D0C; --bf-grafito: #161918; --bf-ceniza: #2A2E2C; --bf-hueso: #EDEAE3; --bf-piedra: #9A9F9A; --bf-lime: #DAF900; --bf-musgo: #5C6E12; --bf-arcilla: #B4743F; --bf-line-d: rgba(237, 234, 227, .14); --bf-line-l: rgba(11, 13, 12, .12); --bf-ease: cubic-bezier(.16, 1, .3, 1); --bf-display: "Geist", "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif; --bf-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace; --bf-bg: var(--bf-noche); --bf-ink: var(--bf-hueso); --bf-ink-2: var(--bf-piedra); --bf-line: var(--bf-line-d); --bf-accent: var(--bf-lime); --bf-surface: var(--bf-grafito); font-family: var(--bf-display); font-feature-settings: "tnum" 1, "cv11" 1; color: var(--bf-ink) !important; background: var(--bf-bg) !important; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip }
.bf-light:not(#b212-x) { --bf-bg: var(--bf-hueso); --bf-ink: var(--bf-noche); --bf-ink-2: #5B615D; --bf-line: var(--bf-line-l); --bf-accent: var(--bf-musgo); --bf-surface: #F6F4EE; background: var(--bf-bg) !important; color: var(--bf-ink) !important }
.bf-dark:not(#b212-x) { --bf-bg: var(--bf-noche); --bf-ink: var(--bf-hueso); --bf-ink-2: var(--bf-piedra); --bf-line: var(--bf-line-d); --bf-accent: var(--bf-lime); --bf-surface: var(--bf-grafito); background: var(--bf-bg) !important; color: var(--bf-ink) !important }
.bf *:not(#b212-x), .bf *:not(#b212-x)::before, .bf *:not(#b212-x)::after { box-sizing: border-box }
.bf :where(h1, h2, h3, p, ul, figure):not(#b212-x) { margin: 0 }
.bf :where(ul):not(#b212-x) { padding: 0; list-style: none }
.bf img:not(#b212-x) { display: block; max-width: 100%; height: auto }
.bf a:not(#b212-x) { text-decoration: none; color: inherit !important }
.bf button:not(#b212-x) { font: inherit; color: inherit !important; cursor: pointer }
.bf:not(#b212-x) { font-size: 16px }
.bf :where(button, [type=button], [type=submit]):not(#b212-x) { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0; box-shadow: none !important; letter-spacing: inherit; text-transform: inherit !important; text-align: inherit; text-decoration: none; padding: 0; margin: 0; width: auto; min-width: 0; white-space: normal; user-select: auto; transition: none }
.bf :where(a):not(#b212-x) { background-color: transparent !important; box-shadow: none !important }
.bf :where(h1, h2, h3, h4, h5, h6):not(#b212-x) { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit !important; color: inherit !important }
.bf :where(p, li, figure, figcaption, blockquote, label, small, span, b, strong):not(#b212-x) { font-family: inherit; text-transform: inherit !important }
.bf :where(input, select, textarea):not(#b212-x) { font: inherit; color: inherit !important; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; padding: 0; margin: 0; width: auto; transition: none }
.bf :where(img):not(#b212-x) { border: 0 !important; border-radius: 0; box-shadow: none !important }
.bf :where(table):not(#b212-x) { margin: 0; background: transparent !important }
.bf :where(th, td):not(#b212-x) { border: 0 !important; background: transparent !important; line-height: 1.5 }
.bf :where(summary):not(#b212-x) { list-style: none }
.bf :focus-visible:not(#b212-x) { outline: 2px solid var(--bf-accent); outline-offset: 4px }
.bf h2:not(#b212-x) { font-size: clamp(34px, 5.4vw, 76px); font-weight: 300; letter-spacing: -.035em; line-height: 1; text-wrap: balance }
.bf h3:not(#b212-x) { font-size: 26px; font-weight: 400; letter-spacing: -.02em; line-height: 1.1 }
.bf-kicker:not(#b212-x) { font-family: var(--bf-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase !important; color: var(--bf-accent) !important; margin-bottom: 18px }
.bf-sub:not(#b212-x) { font-size: clamp(16px, 1.4vw, 19px); font-weight: 400; color: var(--bf-ink-2) !important; max-width: 58ch; margin-top: 20px; text-wrap: pretty }
.bf .bf-btn:not(#b212-x) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 2px; padding: 15px 26px; min-height: 48px; font-weight: 500; font-size: 15px; letter-spacing: .01em; background: var(--bf-ink) !important; color: var(--bf-bg) !important; border: 1px solid var(--bf-ink) !important; transition: background .4s var(--bf-ease), color .4s var(--bf-ease), border-color .4s var(--bf-ease) }
.bf .bf-btn:hover:not(#b212-x) { background: var(--bf-accent) !important; border-color: var(--bf-accent) !important; color: var(--bf-noche) !important }
.bf-light .bf-btn:hover:not(#b212-x) { color: var(--bf-hueso) !important }
.bf .bf-link:not(#b212-x) { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--bf-ink) !important; padding: 14px 4px; border-bottom: 1px solid transparent !important; transition: border-color .4s var(--bf-ease) }
.bf .bf-link:hover:not(#b212-x) { border-bottom-color: var(--bf-accent) !important }
.bf .bf-link span:not(#b212-x) { transition: transform .5s var(--bf-ease); display: inline-block }
.bf .bf-link:hover span:not(#b212-x) { transform: translateY(4px) }
.bf.js .rv:not(#b212-x) { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--bf-ease), transform 1.1s var(--bf-ease) }
.bf.js .rv.in:not(#b212-x) { opacity: 1; transform: none }
.bf-line:not(#b212-x) { display: block; overflow: hidden }
.bf-line > span:not(#b212-x) { display: block; transform: translateY(110%); animation: bfLine 1.2s var(--bf-ease) forwards }
.bf-h1b .bf-line:nth-child(2) > span:not(#b212-x) { animation-delay: .12s }
@keyframes bfLine { to { transform: none; } }
@keyframes bfUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.bf.js .rv:not(#b212-x) { opacity: 1; transform: none; transition: none }
.bf *:not(#b212-x), .bf *:not(#b212-x)::before, .bf *:not(#b212-x)::after { animation: none !important; transition: none !important }
.bf-line > span:not(#b212-x) { transform: none }
}
.bf-nav:not(#b212-x) { position: sticky; top: 0; z-index: 60; background: rgba(11,13,12,.72) !important; -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); color: var(--bf-hueso) !important; border-bottom: 1px solid var(--bf-line-d) !important }
.bf-nav-in:not(#b212-x) { max-width: 1240px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); height: 56px; display: flex; align-items: center; gap: 28px }
.bf-brand:not(#b212-x) { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--bf-hueso) !important }
.bf .bf-logo212:not(#b212-x) { width: 44px; height: 19px; display: block; flex: none }
.bf-by:not(#b212-x), .bf-x:not(#b212-x) { font-family: "Caveat", "Segoe Script", "Comic Sans MS", cursive; font-weight: 500; line-height: 1; color: var(--bf-piedra) !important; letter-spacing: .01em }
.bf-by:not(#b212-x) { font-size: 27px; transform: rotate(-7deg) translateY(2px) }
.bf-x:not(#b212-x) { font-size: 22px; transform: translateY(1px) }
.bf .bf-logo-kngloo:not(#b212-x) { height: 17px; width: auto; max-width: none; display: block; flex: none; opacity: .9 }
.bf .bf-logo-borragan:not(#b212-x) { height: 17px; width: auto; max-width: none; display: block; flex: none; opacity: .85; transition: opacity .4s var(--bf-ease) }
.bf-brand:hover .bf-logo-borragan:not(#b212-x) { opacity: 1 }
@media (max-width: 480px) {
.bf-brand:not(#b212-x) { gap: 6px }
.bf .bf-logo212:not(#b212-x) { width: 34px; height: 15px }
.bf-by:not(#b212-x) { font-size: 21px }
.bf-x:not(#b212-x) { font-size: 17px }
.bf .bf-logo-borragan:not(#b212-x) { height: 13px }
.bf .bf-logo-kngloo:not(#b212-x) { height: 13px }
.bf-nav-in:not(#b212-x) { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); gap: 10px }
.bf .bf-pill:not(#b212-x) { padding: 0 12px }
}
.bf-then:not(#b212-x) { max-width: 1240px; margin: 0 auto 48px; padding: 0 24px }
.bf-then[hidden]:not(#b212-x) { display: none }
.bf-then-stage:not(#b212-x) { position: relative; border-radius: 2px; overflow: hidden; background: #E7E4DC !important; aspect-ratio: 1920 / 1014; user-select: none; touch-action: pan-y }
.bf-then-stage img:not(#b212-x) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.bf-then-old:not(#b212-x) { -webkit-mask-image: linear-gradient(to right, #000 calc(var(--pos, 50%) - 4%), transparent calc(var(--pos, 50%) + 4%)); mask-image: linear-gradient(to right, #000 calc(var(--pos, 50%) - 4%), transparent calc(var(--pos, 50%) + 4%)) }
.bf-then-line:not(#b212-x) { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--bf-hueso) !important; box-shadow: 0 0 0 1px rgba(11, 13, 12, .25) !important; pointer-events: none }
.bf-then-line:not(#b212-x)::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--bf-hueso) !important; color: var(--bf-noche) !important; display: grid; place-items: center; font-size: 18px; box-shadow: 0 6px 20px rgba(11, 13, 12, .35) !important }
.bf-then-tag:not(#b212-x) { position: absolute; top: 14px; font-family: var(--bf-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase !important; color: var(--bf-hueso) !important; background: rgba(11, 13, 12, .6) !important; padding: 6px 10px; border-radius: 2px; pointer-events: none }
.bf-then-tag.old:not(#b212-x) { left: 14px }
.bf-then-tag.now:not(#b212-x) { right: 14px }
.bf-then-range:not(#b212-x) { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize }
.bf-then-cap:not(#b212-x) { font-family: var(--bf-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase !important; color: var(--bf-ink-2) !important; padding: 12px 0 0 }
.bf-links:not(#b212-x) { display: flex; gap: 24px; margin-left: auto; font-size: 13px; font-weight: 400 }
.bf-links a:not(#b212-x) { padding: 8px 0; color: var(--bf-piedra) !important; border-bottom: 1px solid transparent !important; transition: color .4s var(--bf-ease), border-color .4s var(--bf-ease) }
.bf-links a:hover:not(#b212-x), .bf-links a.on:not(#b212-x) { color: var(--bf-hueso) !important; border-bottom-color: var(--bf-lime) !important }
.bf .bf-pill:not(#b212-x) { display: inline-flex; align-items: center; min-height: 44px; background: var(--bf-lime) !important; color: var(--bf-noche) !important; font-weight: 600; font-size: 13px; border-radius: 2px; padding: 0 16px; transition: transform .4s var(--bf-ease) }
.bf .bf-pill:hover:not(#b212-x) { transform: translateY(-1px) }
.bf-progress:not(#b212-x) { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--bf-lime) !important; transition: width .2s linear }
@media (max-width: 860px) {
.bf-links:not(#b212-x) { display: none }
.bf .bf-pill:not(#b212-x) { margin-left: auto }
}
.bf-hero:not(#b212-x) { position: relative; min-height: min(calc(100vh - 56px - var(--bf-tope, 0px)), 1000px); min-height: min(calc(100svh - 56px - var(--bf-tope, 0px)), 1000px); display: grid; align-items: end; background: var(--bf-noche) !important; color: var(--bf-hueso) !important; overflow: hidden }
.bf .bf-hero-img:not(#b212-x) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; transform: scale(1.06); animation: bfKen 12s var(--bf-ease) forwards }
@keyframes bfKen { to { transform: scale(1); } }
.bf-hero:not(#b212-x)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,12,.45) 0%, rgba(11,13,12,0) 28%, rgba(11,13,12,.15) 55%, rgba(11,13,12,.92) 100%) !important }
.bf-hero-txt:not(#b212-x) { position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding: 140px max(24px, env(safe-area-inset-right, 0px)) 72px max(24px, env(safe-area-inset-left, 0px)) }
.bf-hero h1:not(#b212-x) { font-size: clamp(48px, 10vw, 152px); font-weight: 300; letter-spacing: -.045em; line-height: .92; max-width: 10ch }
.bf-h1c:not(#b212-x) { font-size: clamp(16px, 1.6vw, 21px); margin-top: 26px; color: rgba(237,234,227,.82) !important; max-width: 44ch; font-weight: 400 }
.bf-h1c b:not(#b212-x) { color: #fff !important; font-weight: 500 }
.bf-hero-cta:not(#b212-x) { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px }
.bf-h1a:not(#b212-x), .bf-h1c:not(#b212-x), .bf-h1d:not(#b212-x) { animation: bfUp 1.1s var(--bf-ease) both }
.bf-h1a:not(#b212-x) { animation-delay: .05s }
.bf-h1c:not(#b212-x) { animation-delay: .35s }
.bf-h1d:not(#b212-x) { animation-delay: .5s }
.bf-hero .bf-kicker:not(#b212-x) { color: var(--bf-lime) !important }
@media (max-width: 700px) {
.bf-hero:not(#b212-x) { align-items: start }
.bf .bf-hero-img:not(#b212-x) { object-position: 62% 50% }
.bf-hero-txt:not(#b212-x) { padding: 96px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)) }
.bf-hero:not(#b212-x)::after { background: linear-gradient(180deg, rgba(11,13,12,.85) 0%, rgba(11,13,12,.7) 45%, rgba(11,13,12,.25) 70%, rgba(11,13,12,.55) 100%) !important }
.bf-hero h1:not(#b212-x) { font-size: clamp(44px, 14vw, 88px) }
.bf-h1c:not(#b212-x) { text-shadow: 0 1px 12px rgba(11,13,12,.6) }
}
.bf-manifiesto:not(#b212-x) { max-width: 1240px; margin: 0 auto; padding: clamp(96px, 14vw, 200px) 24px clamp(80px, 10vw, 140px) }
.bf-big:not(#b212-x) { font-size: clamp(26px, 3.4vw, 50px); font-weight: 300; letter-spacing: -.03em; line-height: 1.16; max-width: 30ch; text-wrap: pretty }
.bf-dim:not(#b212-x) { color: var(--bf-piedra) !important }
.bf-kpis:not(#b212-x) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 72px; padding-top: 36px; border-top: 1px solid var(--bf-line) !important }
.bf-kpis b:not(#b212-x) { display: block; font-size: clamp(34px, 5vw, 80px); font-weight: 200; letter-spacing: -.045em; line-height: 1; white-space: nowrap }
.bf-kpis span:not(#b212-x) { display: block; font-family: var(--bf-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase !important; color: var(--bf-piedra) !important; margin-top: 12px }
@media (max-width: 700px) {
.bf-kpis:not(#b212-x) { grid-template-columns: 1fr 1fr }
}
.bf-chapter:not(#b212-x) { padding: clamp(96px, 12vw, 170px) 0 }
.bf-head:not(#b212-x) { max-width: 1240px; margin: 0 auto 52px; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)) }
.bf-story:not(#b212-x) { padding: 0 }
.bf-story-in:not(#b212-x) { max-width: 1240px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: start }
.bf-stage:not(#b212-x) { position: sticky; top: calc(56px + 4vh); top: calc(56px + 4svh); height: calc(92vh - 56px); height: calc(92svh - 56px); display: flex; flex-direction: column; justify-content: center; gap: 18px }
.bf-frames:not(#b212-x) { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 74vh; max-height: 74svh; overflow: hidden; background: var(--bf-grafito) !important; border-radius: 2px }
.bf-stage-soft .bf-frames:not(#b212-x) { background: #E3E0D8 !important }
.bf-stage-soft .bf-frames > img:not(#b212-x) { object-position: 50% 30% }
.bf-frames > *:not(#b212-x) { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--bf-ease), transform 1.6s var(--bf-ease) }
.bf-frames > img:not(#b212-x) { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04) }
.bf-frames > .on:not(#b212-x) { opacity: 1; transform: none }
.bf-frames-dark:not(#b212-x) { background: #131615 !important }
.bf-steps:not(#b212-x) { padding: 12vh 0; padding: 12svh 0 }
.bf-step:not(#b212-x) { min-height: 76vh; min-height: 76svh; display: flex; flex-direction: column; justify-content: center; opacity: .55; transition: opacity .8s var(--bf-ease) }
.bf-step.on:not(#b212-x) { opacity: 1 }
.bf-step > p:not(.bf-kicker):not(#b212-x) { font-size: 17px; margin-top: 18px; color: var(--bf-ink-2) !important; max-width: 42ch; text-wrap: pretty }
.bf-nums:not(#b212-x) { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--bf-line) !important }
.bf-nums b:not(#b212-x) { display: block; font-size: clamp(30px, 4vw, 58px); font-weight: 200; letter-spacing: -.045em; line-height: 1; white-space: nowrap }
.bf-nums span:not(#b212-x) { display: block; font-family: var(--bf-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase !important; color: var(--bf-ink-2) !important; margin-top: 10px }
.bf-fact:not(#b212-x) { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--bf-line) !important }
.bf-fact b:not(#b212-x) { display: block; font-size: clamp(40px, 5vw, 72px); font-weight: 200; letter-spacing: -.045em; line-height: 1 }
.bf-fact span:not(#b212-x) { display: block; font-family: var(--bf-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase !important; color: var(--bf-ink-2) !important; margin-top: 10px }
.bf-seg:not(#b212-x) { display: inline-flex; align-self: flex-start; border: 1px solid var(--bf-line) !important; border-radius: 2px; padding: 3px }
.bf-seg button:not(#b212-x) { border: 0 !important; background: transparent !important; border-radius: 1px; min-height: 44px; padding: 0 18px; font-weight: 500; font-size: 13px; color: var(--bf-ink-2) !important; transition: .4s var(--bf-ease) }
.bf-seg button.on:not(#b212-x) { background: var(--bf-ink) !important; color: var(--bf-bg) !important }
.bf-spec:not(#b212-x) { margin-top: 30px; border-top: 1px solid var(--bf-line) !important }
.bf-spec li:not(#b212-x) { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--bf-line) !important; font-size: 15px }
.bf-spec li span:not(#b212-x) { color: var(--bf-ink-2) !important }
.bf-spec li b:not(#b212-x) { font-weight: 500; text-align: right }
.bf-terrenos:not(#b212-x) { background: var(--bf-noche) !important; color: var(--bf-hueso) !important }
.bf-frames-full:not(#b212-x) { aspect-ratio: 4 / 3; max-height: 82vh; max-height: 82svh }
.bf-frames-full:not(#b212-x)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,12,0) 55%, rgba(11,13,12,.55) 100%) !important; pointer-events: none }
.bf-terrenos h2:not(#b212-x) { font-size: clamp(56px, 8vw, 128px); font-weight: 200; letter-spacing: -.05em; line-height: .9 }
.bf-scene-index:not(#b212-x) { display: flex; gap: 6px }
.bf-scene-index i:not(#b212-x) { display: block; width: 28px; height: 2px; background: var(--bf-line-d) !important; transition: background .6s var(--bf-ease) }
.bf-scene-index i.on:not(#b212-x) { background: var(--bf-lime) !important }
@media (max-width: 880px) {
.bf-story-in:not(#b212-x) { display: block }
.bf-stage:not(#b212-x) { position: sticky; top: 56px; height: auto; padding: 10px 0 12px; z-index: 2; gap: 10px; background: var(--bf-bg) !important }
.bf-terrenos .bf-stage:not(#b212-x) { background: var(--bf-noche) !important }
.bf-frames:not(#b212-x), .bf-frames-full:not(#b212-x) { aspect-ratio: 16 / 10; max-height: 40vh; max-height: 40svh }
.bf-steps:not(#b212-x) { padding: 3vh 0 6vh; padding: 3svh 0 6svh }
.bf-step:not(#b212-x) { min-height: auto; padding: 34px 0 40px; opacity: 1 }
.bf-terrenos h2:not(#b212-x) { font-size: clamp(48px, 14vw, 88px) }
.bf-nums b:not(#b212-x) { font-size: clamp(26px, 8vw, 48px) }
}
.bf-angles:not(#b212-x) { display: block }
.bf-angles img:not(#b212-x) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: none; opacity: 1 }
.bf-angles svg:not(#b212-x) { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--bf-display) }
.bf-angles .g:not(#b212-x) { stroke: rgba(237,234,227,.25); stroke-width: 1.5 }
.bf-angles .l:not(#b212-x) { stroke: var(--bf-lime); stroke-width: 2.5; stroke-linecap: round; fill: none }
.bf-angles .arc:not(#b212-x) { stroke: var(--bf-lime); stroke-width: 1.5; fill: rgba(218,249,0,.10) }
.bf-angles .dot:not(#b212-x) { fill: var(--bf-lime) }
.bf-angles .t:not(#b212-x) { fill: var(--bf-hueso); font-size: 28px; font-weight: 300; letter-spacing: -.02em }
.bf-angles .lbl:not(#b212-x) { fill: rgba(237,234,227,.55); font-family: var(--bf-mono); font-size: 11px; letter-spacing: .14em }
.bf-angles-note:not(#b212-x) { position: absolute; left: 14px; bottom: 10px; font-family: var(--bf-mono); font-size: 11px; letter-spacing: .08em; color: rgba(237,234,227,.7) !important }
.bf-studio:not(#b212-x) { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 18px }
.bf-studio figure:not(#b212-x) { background: #E7E4DC !important; border-radius: 2px; overflow: hidden; display: flex; flex-direction: column }
.bf-studio-main:not(#b212-x) { grid-row: span 2 }
.bf-studio img:not(#b212-x) { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1920 / 1014 }
.bf-studio-main img:not(#b212-x) { flex: 1; height: 100% }
.bf-studio figcaption:not(#b212-x) { font-family: var(--bf-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase !important; color: var(--bf-ink-2) !important; padding: 12px 14px; border-top: 1px solid var(--bf-line) !important }
.bf-specline:not(#b212-x) { max-width: 1240px; margin: 44px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr) }
.bf-specline li:not(#b212-x) { padding: 22px 20px 22px 0; border-top: 1px solid var(--bf-line) !important }
.bf-specline b:not(#b212-x) { display: block; font-size: clamp(28px, 3.4vw, 48px); font-weight: 200; letter-spacing: -.04em; line-height: 1 }
.bf-specline span:not(#b212-x) { display: block; font-family: var(--bf-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase !important; color: var(--bf-ink-2) !important; margin-top: 10px }
@media (max-width: 860px) {
.bf-studio:not(#b212-x) { grid-template-columns: 1fr 1fr }
.bf-studio-main:not(#b212-x) { grid-column: span 2; grid-row: auto }
.bf-specline:not(#b212-x) { grid-template-columns: 1fr 1fr }
}
.bf-explorer:not(#b212-x) { max-width: 1240px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column }
.bf-ex-views:not(#b212-x) { display: inline-flex; align-self: flex-start; border: 1px solid var(--bf-line) !important; border-radius: 2px; padding: 3px; margin-bottom: 20px }
.bf-ex-views button:not(#b212-x) { border: 0 !important; background: transparent !important; border-radius: 1px; min-height: 44px; padding: 0 18px; font-weight: 500; font-size: 13px; color: var(--bf-ink-2) !important; transition: .4s var(--bf-ease) }
.bf-ex-views button.on:not(#b212-x) { background: var(--bf-ink) !important; color: var(--bf-bg) !important }
.bf-ex-stage:not(#b212-x) { position: relative; border-radius: 2px; overflow: hidden; background: var(--bf-surface) !important }
.bf-ex-view:not(#b212-x) { display: none; position: relative }
.bf-ex-view.on:not(#b212-x) { display: block; animation: bfFade 1s var(--bf-ease) }
@keyframes bfFade { from { opacity: 0; } to { opacity: 1; } }
.bf-ex-view img:not(#b212-x) { width: 100%; aspect-ratio: 16 / 9; object-fit: cover }
.bf-hs:not(#b212-x) { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(237,234,227,.7) !important; background: rgba(11,13,12,.7) !important; color: var(--bf-hueso) !important; font-family: var(--bf-mono); font-size: 11px; font-weight: 500; display: grid; place-items: center; transition: transform .5s var(--bf-ease), background .4s, border-color .4s }
.bf-hs:not(#b212-x)::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(218,249,0,.55) !important; animation: bfPulse 2.6s ease-out infinite; animation-play-state: paused }
.bf-explorer.vis .bf-hs:not(#b212-x)::before { animation-play-state: running }
.bf-hs:not(#b212-x)::after { content: ""; position: absolute; inset: -10px; border-radius: 50% }
@keyframes bfPulse { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.bf-hs:hover:not(#b212-x) { transform: translate(-50%, -50%) scale(1.12); border-color: var(--bf-lime) !important }
.bf-hs.on:not(#b212-x) { background: var(--bf-lime) !important; border-color: var(--bf-lime) !important; color: var(--bf-noche) !important; transform: translate(-50%, -50%) scale(1.15); z-index: 2 }
.bf-hs.on:not(#b212-x)::before { animation: none; opacity: 0 }
.bf-ex-card:not(#b212-x) { position: absolute; z-index: 3; left: var(--cx, 24px); top: var(--cy, 24px); width: min(340px, calc(100% - 48px)); background: rgba(11,13,12,.86) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--bf-hueso) !important; border: 1px solid var(--bf-line-d) !important; border-radius: 2px; padding: 20px 22px 22px; animation: bfUp .5s var(--bf-ease) }
.bf-ex-card[hidden]:not(#b212-x) { display: none }
.bf-ex-card .bf-ex-n:not(#b212-x) { display: inline-block; font-family: var(--bf-mono); font-size: 11px; letter-spacing: .14em; color: var(--bf-lime) !important; margin-bottom: 10px }
.bf-ex-card h3:not(#b212-x) { font-size: 20px; font-weight: 500 }
.bf-ex-card p:not(#b212-x) { font-size: 14.5px; color: rgba(237,234,227,.78) !important; margin-top: 8px; line-height: 1.5 }
.bf-ex-close:not(#b212-x) { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0 !important; background: transparent !important; color: rgba(237,234,227,.6) !important; font-size: 22px; line-height: 1; display: grid; place-items: center; padding: 0 }
.bf-ex-list:not(#b212-x) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px }
.bf-ex-list button:not(#b212-x) { border: 1px solid var(--bf-line) !important; background: transparent !important; border-radius: 2px; min-height: 44px; padding: 9px 14px; font-size: 13px; font-weight: 400; color: var(--bf-ink-2) !important; transition: .4s var(--bf-ease) }
.bf-ex-list button:hover:not(#b212-x) { color: var(--bf-ink) !important; border-color: var(--bf-ink-2) !important }
.bf-ex-list button.on:not(#b212-x) { background: var(--bf-accent) !important; border-color: var(--bf-accent) !important; color: var(--bf-noche) !important }
.bf-light .bf-ex-list button.on:not(#b212-x) { color: var(--bf-hueso) !important }
@media (max-width: 700px) {
.bf-ex-card:not(#b212-x) { position: relative; left: 0 !important; top: 0 !important; width: auto; border-radius: 0; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11,13,12,.97) !important }
.bf-hs:not(#b212-x) { width: 24px; height: 24px; font-size: 10px; left: var(--mx, var(--x)); top: var(--my, var(--y)) }
.bf-ex-views:not(#b212-x) { order: -2 }
}
.bf-duo:not(#b212-x) { max-width: 1240px; margin: 48px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.bf-duo figure img:not(#b212-x) { border-radius: 2px; aspect-ratio: 4 / 3; object-fit: cover; width: 100% }
.bf-duo figcaption:not(#b212-x) { font-size: 14px; color: var(--bf-ink-2) !important; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bf-line) !important }
@media (max-width: 700px) {
.bf-duo:not(#b212-x) { grid-template-columns: 1fr }
}
.bf-full:not(#b212-x) { position: relative; min-height: 88vh; min-height: 88svh; display: grid; align-items: end; color: var(--bf-hueso) !important; overflow: hidden; background: var(--bf-noche) !important }
.bf-full > img:not(#b212-x) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50% }
.bf-full:not(#b212-x)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,12,.15) 0%, rgba(11,13,12,.86) 100%) !important }
.bf-full-txt:not(#b212-x) { position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding: 140px 24px 80px }
.bf-full-txt h2:not(#b212-x) { font-size: clamp(56px, 8vw, 128px); font-weight: 200; letter-spacing: -.05em; line-height: .9 }
.bf-full-txt p:last-child:not(#b212-x) { font-size: 17px; color: rgba(237,234,227,.8) !important; max-width: 52ch; margin-top: 18px }
.bf-full .bf-kicker:not(#b212-x) { color: var(--bf-lime) !important }
.bf-versions:not(#b212-x) { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--bf-line) !important; border-bottom: 1px solid var(--bf-line) !important }
.bf-versions article:not(#b212-x) { position: relative; padding: 28px 28px 34px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--bf-line) !important }
.bf-versions article:last-child:not(#b212-x) { border-right: 0 !important }
.bf-versions article.bf-top:not(#b212-x)::before { content: "Más capaz"; position: absolute; top: 28px; right: 28px; font-family: var(--bf-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase !important; color: var(--bf-accent) !important; border: 1px solid var(--bf-accent) !important; border-radius: 2px; padding: 5px 8px }
.bf-versions img:not(#b212-x) { border-radius: 2px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-bottom: 18px }
.bf-versions h3:not(#b212-x) { font-size: 34px; font-weight: 300; letter-spacing: -.03em }
.bf-versions .bf-kicker:not(#b212-x) { margin-bottom: 8px }
.bf-price:not(#b212-x) { font-size: clamp(34px, 3.2vw, 44px); font-weight: 200; letter-spacing: -.045em; line-height: 1; margin-top: 18px }
.bf-versions small:not(#b212-x) { font-family: var(--bf-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase !important; color: var(--bf-ink-2) !important; margin-top: 8px }
.bf-versions ul:not(#b212-x) { margin: 18px 0 22px; display: grid; gap: 8px; font-size: 14.5px; color: var(--bf-ink-2) !important; border-top: 1px solid var(--bf-line) !important; padding-top: 16px }
.bf-versions .bf-btn:not(#b212-x) { margin-top: auto; align-self: flex-start }
.bf-versions .bf-link:not(#b212-x) { font-size: 14px; padding: 15px 4px 7px; align-self: flex-start }
@media (max-width: 880px) {
.bf-versions:not(#b212-x) { grid-template-columns: 1fr }
.bf-versions article:not(#b212-x) { border-right: 0 !important; border-bottom: 1px solid var(--bf-line) !important }
.bf-versions article:last-child:not(#b212-x) { border-bottom: 0 !important }
}
.bf-compare:not(#b212-x) { max-width: 1240px; margin: 28px auto 0; padding: 0 24px }
.bf-compare summary:not(#b212-x) { cursor: pointer; font-weight: 500; font-size: 15px; padding: 16px 0; list-style: none; display: flex; align-items: center; gap: 12px; color: var(--bf-ink) !important }
.bf-compare summary:not(#b212-x)::-webkit-details-marker { display: none }
.bf-compare summary:not(#b212-x)::before { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 2px; border: 1px solid var(--bf-line) !important; font-weight: 300; font-size: 18px }
.bf-compare[open] summary:not(#b212-x)::before { content: "–" }
.bf-tbl:not(#b212-x) { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 1px solid var(--bf-line) !important; border-radius: 2px; background: var(--bf-surface) !important }
.bf table:not(#b212-x) { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 14px }
.bf th:not(#b212-x), .bf td:not(#b212-x) { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--bf-line) !important; vertical-align: top }
.bf th:not(#b212-x) { font-weight: 500; font-size: 13px; letter-spacing: .02em }
.bf td:first-child:not(#b212-x), .bf th:first-child:not(#b212-x), .bf tbody th:not(#b212-x) { position: sticky; left: 0; z-index: 1; background: var(--bf-surface) !important; color: var(--bf-ink-2) !important; font-weight: 400; width: 30%; min-width: 150px; box-shadow: 1px 0 0 var(--bf-line) !important }
.bf td.y:not(#b212-x) { color: var(--bf-accent) !important; font-weight: 500 }
.bf td.n:not(#b212-x) { color: #8F5424 !important }
.bf-cta:not(#b212-x) { background: var(--bf-noche) !important; color: var(--bf-hueso) !important; --bf-accent: var(--bf-lime); --bf-ink: var(--bf-hueso); --bf-bg: var(--bf-noche); --bf-line: var(--bf-line-d); padding: clamp(96px, 12vw, 170px) 24px; text-align: center }
.bf-cta h2:not(#b212-x) { max-width: 18ch; margin: 0 auto }
.bf-cta p:not(.bf-kicker):not(#b212-x) { color: var(--bf-piedra) !important; font-size: 17px; max-width: 52ch; margin: 20px auto 0 }
.bf-cta .bf-hero-cta:not(#b212-x) { justify-content: center; margin-top: 34px }
.bf-red:not(#b212-x) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin: 56px auto 0; padding-top: 28px; border-top: 1px solid var(--bf-line-d) !important; max-width: 760px; font-family: var(--bf-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase !important; color: var(--bf-piedra) !important }
.bf-red span:not(#b212-x) { display: inline-flex; align-items: center; gap: 12px }
.bf .bf-red img:not(#b212-x) { height: 22px; width: auto; max-width: none; display: block; opacity: .9 }
.bf .bf-red .bf-logo212:not(#b212-x) { width: 39px; height: 17px; color: var(--bf-hueso) !important }
.bf-legal:not(#b212-x) { max-width: 96ch; margin: 0 auto; padding: 32px 24px 44px; font-size: 12px; color: var(--bf-piedra) !important; background: var(--bf-noche) !important }
.bf-chapter:not(#b212-x), .bf-full:not(#b212-x), .bf-cta:not(#b212-x), .bf-manifiesto:not(#b212-x), .bf-story:not(#b212-x) { scroll-margin-top: 56px }
html:not(#b212-x) { scroll-padding-top: 56px }
html:has(.bf):not(#b212-x) { scroll-behavior: smooth }
@supports not (overflow: clip) {
html:has(.bf):not(#b212-x) { overflow-x: hidden }
}
@media (prefers-reduced-motion: reduce) {
html:not(#b212-x) { scroll-behavior: auto }
}
html.lenis:not(#b212-x), html.lenis:has(.bf):not(#b212-x) { scroll-behavior: auto !important }