/* Manual de marca — complementa styles.css */
.bk { padding-top: var(--nav-h); }
.bk__crumb { color: var(--fg-3); margin-right: 16px; }
@media (max-width: 720px) { .bk__crumb { display: none; } }

.bk-hero { position: relative; padding-block: clamp(80px, 12vw, 160px) clamp(60px, 8vw, 120px); }
.bk-hero__title { margin: 28px 0 32px; font: 400 clamp(3.5rem, 10vw, 10rem)/0.96 var(--f-display); letter-spacing: -0.02em; max-width: 12ch; }
.bk-hero__title .hl { color: var(--albero-deep); font-style: italic; }
.bk-hero__lead { max-width: 54ch; font-size: clamp(1.0625rem, 1.4vw, 1.3rem); color: var(--fg-2); }
.bk-hero__mark { position: absolute; right: var(--gutter); top: 50%; width: clamp(140px, 24vw, 340px); transform: translateY(-50%); }
.bk-anim { width: 100%; height: auto; overflow: visible; }
.bk-anim g { animation: bk-float 4s var(--ease-io) infinite; }
.bk-anim .a1 { animation-name: bk-lift; }
.bk-anim .a2 { animation-delay: .15s; }
.bk-anim .a3 { animation-delay: .3s; }
@keyframes bk-float { 50% { transform: translateY(-1px); } }
@keyframes bk-lift { 50% { transform: translateY(-4px); } }
@media (max-width: 900px) { .bk-hero__mark { position: static; transform: none; margin-top: 48px; width: 160px; } }

.bk-sec { padding-block: clamp(64px, 8vw, 120px); border-top: 1px solid var(--line); }
.bk-sec__head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.bk-h2 { font: 400 clamp(2.5rem, 5.5vw, 5rem)/1 var(--f-display); letter-spacing: -0.02em; }
.bk-p { max-width: 62ch; color: var(--fg-2); margin-bottom: 32px; }
.bk-cap { margin-top: 12px; color: var(--fg-3); font-size: .6875rem; }

.bk-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bk-card { padding: 28px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); }
.bk-card > .mono { color: var(--accent); font-size: .6875rem; }
.bk-card h3 { font: 500 1.75rem/1.05 var(--f-display); letter-spacing: -0.02em; margin: 14px 0 10px; }
.bk-card p { color: var(--fg-2); font-size: .9375rem; }
@media (max-width: 860px) { .bk-grid3 { grid-template-columns: 1fr; } }

.bk-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bk-logo { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.bk-logo img, .bk-logo svg { width: 56%; height: auto; }
.bk-logo figcaption { position: absolute; left: 20px; bottom: 16px; font-size: .625rem; opacity: .7; }
.bk-logo--dark { background: var(--tinta); color: var(--cal); }
.bk-logo--light { background: var(--cal); color: var(--tinta); }
.bk-logo--albero { background: var(--albero); color: var(--tinta); }
.bk-logo--iso { background: radial-gradient(circle, rgba(255,171,96,.3), transparent 60%), var(--bg-2); }
.bk-logo--iso img { width: 22%; }
@media (max-width: 760px) { .bk-logos { grid-template-columns: 1fr; } }

.bk-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.bk-rule h3 { font: 500 1.375rem/1.1 var(--f-display); margin: 18px 0 8px; }
.bk-rule p { color: var(--fg-2); font-size: .9375rem; }
.bk-rule__demo { height: 180px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 20px; }
.bk-clear { position: relative; }
.bk-clear img { width: 72px; }
.bk-clear__box { position: absolute; width: 112px; height: 112px; border: 1px dashed var(--albero); }
.bk-dont { flex-direction: column; gap: 14px; position: relative; }
.bk-dont img { height: 22px; opacity: .8; }
.bk-dont::after { content: ""; position: absolute; inset: 20px; background: linear-gradient(to top right, transparent calc(50% - 1px), #C9422E, transparent calc(50% + 1px)); }
@media (max-width: 860px) { .bk-rules { grid-template-columns: 1fr; } }

.bk-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sw { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 160px; padding: 20px; border-radius: var(--radius-sm); background: var(--c); color: var(--t); text-align: left; border: 1px solid var(--line); transition: transform .5s var(--ease-out); }
.sw:hover { transform: translateY(-4px); }
.sw--xl { grid-column: span 2; min-height: 240px; }
.sw__name { font: 500 1.75rem/1 var(--f-display); letter-spacing: -0.02em; }
.sw .mono { font-size: .625rem; opacity: .8; }
.sw::after { content: "Copiado"; position: absolute; top: 16px; right: 16px; font: 500 .625rem var(--f-mono); text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.sw.is-copied::after { opacity: 1; }
.bk-ratio { display: flex; height: 18px; margin-top: 24px; border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 760px) { .bk-swatches { grid-template-columns: 1fr 1fr; } }

.bk-type { display: grid; }
.bk-type__row { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center; padding-block: 36px; border-bottom: 1px solid var(--line); }
.bk-type__meta .mono { color: var(--accent); font-size: .6875rem; }
.bk-type__meta h3 { font: 500 1.5rem/1.1 var(--f-display); margin: 10px 0 6px; }
.bk-type__meta p { color: var(--fg-3); font-size: .875rem; }
.bk-type__sample--display em { color: var(--albero-deep); }
.bk-type__sample--display { font: 400 clamp(3rem, 7vw, 7rem)/0.96 var(--f-display); letter-spacing: -0.02em; }
.bk-type__sample--sans { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.4; color: var(--fg-2); }
.bk-type__sample--mono { font-size: clamp(.875rem, 1.4vw, 1.125rem); color: var(--fg-2); }
@media (max-width: 860px) { .bk-type__row { grid-template-columns: 1fr; } }

.bk-demo { height: 160px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; position: relative; overflow: hidden; display: grid; place-items: center; }
.bk-demo--stack i { position: absolute; left: 50%; width: 90px; height: 45px; margin-left: -45px; background: var(--tinta-2); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: bk-drop 2.8s var(--ease-back) infinite; }
.bk-demo--stack i:nth-child(1) { top: 86px; background: var(--tinta); }
.bk-demo--stack i:nth-child(2) { top: 66px; animation-delay: .12s; }
.bk-demo--stack i:nth-child(3) { top: 40px; background: var(--albero); animation-delay: .24s; }
@keyframes bk-drop { 0% { transform: translateY(-120px); opacity: 0; } 25%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.bk-demo--rise { align-content: center; gap: 0; }
.bk-demo--rise span { display: block; font: 400 2.25rem/1 var(--f-display); letter-spacing: -0.02em; clip-path: inset(0 0 -10% 0); animation: bk-rise 2.8s var(--ease-out) infinite; }
.bk-demo--rise span:nth-child(2) { color: var(--albero-deep); animation-delay: .12s; }
@keyframes bk-rise { 0% { transform: translateY(110%); opacity: 0; } 30%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.bk-demo--curve svg { width: 80%; overflow: visible; }
.bk-demo--curve path { fill: none; stroke: var(--albero); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.8s var(--ease-io) infinite; filter: drop-shadow(0 0 6px rgba(255,171,96,.6)); }
.bk-tokens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; font-size: .6875rem; }
.bk-tokens div { padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.bk-tokens dt { color: var(--accent); margin-bottom: 6px; }
.bk-tokens dd { color: var(--fg-2); text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) { .bk-tokens { grid-template-columns: 1fr 1fr; } }

.bk-voice { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bk-voice__col { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); display: grid; gap: 18px; align-content: start; }
.bk-voice__col p { font: 500 clamp(1.25rem, 2vw, 1.6rem)/1.2 var(--f-display); letter-spacing: -0.015em; }
.bk-voice__col--do { background: var(--surface); box-shadow: var(--shadow); }
.bk-voice__col--do .mono { color: var(--accent); }
.bk-voice__col--dont p { color: var(--fg-3); text-decoration: line-through; text-decoration-color: rgba(190, 60, 40, .7); }
.bk-voice__col--dont .mono { color: #B3401E; }
@media (max-width: 760px) { .bk-voice { grid-template-columns: 1fr; } }

.bk-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bk-files a { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-weight: 600; transition: border-color .3s, background-color .3s; }
.bk-files a:hover { border-color: var(--accent); background: rgba(255, 171, 96, .06); }
.bk-files .mono { color: var(--fg-3); font-size: .625rem; font-weight: 500; }
@media (max-width: 760px) { .bk-files { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .bk-demo--curve path { stroke-dashoffset: 0; } }

/* Fraunces: óptica media, terminaciones suaves (el shorthand font reinicia los ejes) */
.bk-hero__title, .bk-h2, .bk-card h3, .bk-rule h3, .sw__name, .bk-type__meta h3, .bk-type__sample--display, .bk-demo--rise span, .bk-voice__col p { font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0; }