/* Home · TiniBot brand book, pp. 7, 14, 19 and 31.
   Official colors remain intact; darker blue is reserved for small text/controls. */
.mb-home-brand {
    --home-blue: var(--color-brand-blue);
    --home-blue-text: var(--color-text);
    --home-orange: var(--color-brand-orange);
    --home-yellow: var(--color-brand-yellow);
    --home-cream: var(--color-brand-cream);
    --home-sky: var(--color-brand-sky);
}
.mb-home.mb-home-brand :is(h1, h2, h3) { color: var(--home-blue-text); }
.mb-home-brand .mb-hero-backdrop {
    background: var(--color-paper-warm);
    border-bottom: 1px solid var(--home-cream);
}
.mb-home-brand .mb-hero {
    padding-block: 145px 72px;
    grid-template-columns: 1.05fr 1fr;
    gap: 70px;
    min-height: 740px;
}
.mb-home-brand .mb-hero-eyebrow {
    display: inline-flex;
    border: 1px solid var(--color-yellow-200);
    border-radius: 100px;
    padding: 8px 13px;
    background: var(--home-cream);
    color: var(--color-text);
    font-size: .65rem;
    letter-spacing: .06em;
}
.mb-home-brand .mb-dot { background: var(--home-blue); }
.mb-home-brand .mb-hero h1 {
    font-size: clamp(3.2rem, 5.15vw, 4.65rem);
    line-height: 1.06;
    margin: 24px 0;
}
.mb-home-brand .mb-hero h1 em { color: var(--home-blue); z-index: 0; }
.mb-home-brand .mb-hero h1 em::after {
    height: 8px;
    bottom: -7px;
    border: 0;
    background: var(--home-yellow);
    border-radius: 4px;
    transform: rotate(-2deg);
    z-index: -1;
}
.mb-home-brand .mb-hero .mb-lead { font-size: 1.075rem; max-width: 475px; margin-top: 28px; }
.mb-home-brand .mb-button {
    background: var(--home-orange);
    color: var(--color-on-accent) !important;
    border-radius: 12px;
    padding: 16px 22px;
    box-shadow: 0 4px 0 var(--color-yellow-700);
    font-size: .94rem;
}
.mb-home-brand .mb-button:hover { box-shadow: 0 6px 0 var(--color-yellow-700); }
.mb-home-brand .mb-text-link { color: var(--home-blue-text); border-color: var(--color-blue-300); font-size: .9rem; }
.mb-home-brand .mb-text-link:hover { color: var(--color-text); border-color: currentColor; }
.mb-home-brand .mb-hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    font-size: .77rem;
    font-weight: 700;
    color: var(--color-text-muted);
}
.mb-home-brand .mb-hero-benefits li::before { content: '✓'; margin-right: 6px; color: var(--home-blue-text); }
.mb-home-brand .mb-hero-scene { padding: 20px 0 45px 24px; }
.mb-home-brand .mb-hero-scene::before {
    content: '';
    position: absolute;
    inset: -9px -18px 12px 0;
    background: var(--home-yellow);
    border-radius: 48% 48% 26px 26px;
    transform: rotate(5deg);
}
.mb-home-brand .mb-class-photo { padding: 9px 9px 0; border-radius: 160px 160px 24px 24px; transform: none; box-shadow: none; }
.mb-home-brand .mb-class-photo > img { height: 420px; border-radius: 152px 152px 16px 16px; }
.mb-home-brand .mb-class-photo figcaption { justify-content: center; font-size: .76rem; height: 47px; }
.mb-home-brand .mb-scene-spark { position: absolute; top: -20px; left: 5px; z-index: 2; font-size: 5.7rem; line-height: 1; color: var(--home-orange); transform: rotate(12deg); }
.mb-home-brand .mb-code-sticker { position: absolute; right: -30px; bottom: 90px; width: 210px; padding: 15px; border: 3px solid var(--color-surface); border-radius: 17px; background: var(--home-blue-text); color: var(--color-on-dark); box-shadow: 0 8px 0 color-mix(in srgb, var(--color-blue-900) 12.549%, transparent); transform: rotate(5deg); }
.mb-home-brand .mb-code-sticker > span { display: block; font-size: .58rem; letter-spacing: .09em; font-weight: 900; margin-bottom: 10px; }
.mb-home-brand .mb-code-sticker b { display: flex; align-items: center; gap: 8px; padding: 8px; margin-top: 4px; background: color-mix(in srgb, var(--color-surface) 9.412%, transparent); border-radius: 6px; font-size: .72rem; }
.mb-home-brand .mb-code-sticker i { font-style: normal; color: var(--home-sky); font-size: .61rem; }
.mb-home-brand .mb-code-sticker b:last-child { background: var(--home-yellow); color: var(--color-text); }
.mb-home-brand .mb-code-sticker b:last-child i { color: var(--color-text); }
.mb-home-brand .mb-code-sticker b > span { margin-left: auto; }
.mb-home-brand .mb-robot-sticker { left: 0; bottom: 12px; background: var(--color-surface); border: 1px solid var(--home-sky); padding: 9px 18px 9px 9px; border-radius: 16px; transform: rotate(-4deg); }
.mb-home-brand .mb-robot-sticker img { width: 58px; height: 58px; object-fit: contain; mix-blend-mode: normal; border-radius: 12px; }
.mb-home-brand .mb-robot-sticker b { color: var(--home-blue-text); }
.mb-home-brand .mb-belief-strip { background: var(--home-blue-text); }
.mb-home-brand .mb-belief-strip > .mb-wrap { color: var(--color-on-dark); font-size: .88rem; padding-block: 23px; }
.mb-home-brand .mb-belief-strip b { color: var(--home-yellow); font-size: 1.5rem; }
.mb-home-brand .mb-section { padding-block: 84px; }
.mb-home-brand .mb-kicker { color: var(--color-text); }
.mb-home-brand h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.mb-home.mb-home-brand h2 em { color: var(--home-blue-text); }
.mb-home-brand .mb-section-head { margin-bottom: 38px; }
.mb-home-brand .mb-path { background: var(--home-cream); border: 1px solid var(--color-yellow-200); border-radius: 24px; padding: 28px; border-top: 6px solid var(--home-yellow); }
.mb-home-brand .mb-path-python_lab { background: var(--color-cyan-50); border-color: var(--color-blue-200); border-top-color: var(--home-blue); }
.mb-home-brand .mb-path-mentor { background: var(--color-orange-50); border-color: var(--color-red-200); border-top-color: var(--home-orange); }
.mb-home-brand .mb-path-top { margin-bottom: 24px; }
.mb-home-brand .mb-path-symbol { border: 0; background: var(--home-yellow); color: var(--color-text); width: 54px; height: 54px; border-radius: 16px; }
.mb-home-brand .mb-path-python_lab .mb-path-symbol { background: var(--home-sky); color: var(--color-text); }
.mb-home-brand .mb-path-mentor .mb-path-symbol { background: var(--home-orange); color: var(--color-on-accent); }
.mb-home-brand .mb-pill { border-radius: 100px; background: var(--color-surface); font-size: .68rem; padding: 7px 10px; color: var(--color-text); }
.mb-home-brand .mb-path-category { font-size: .61rem; font-weight: 900; letter-spacing: .07em; color: var(--color-text-muted); }
.mb-home-brand .mb-path > h3 { margin-top: 10px; font-size: 1.65rem; letter-spacing: -.025em; }
.mb-home-brand .mb-path > a { background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-shadow) 15.686%, transparent); padding: 12px 15px; border-radius: 10px; }
.mb-home-brand .mb-path > a:hover { background: var(--color-text); color: var(--color-on-dark); }
.mb-home-brand .mb-discover { background: var(--home-blue-text); position: relative; }
.mb-home.mb-home-brand .mb-discover h2 { color: var(--color-on-dark); }
.mb-home-brand .mb-discover .mb-kicker { color: var(--home-sky); }
.mb-home.mb-home-brand .mb-discover h2 em { color: var(--home-yellow); }
.mb-home-brand .mb-learning-list > li > b { background: var(--home-yellow); color: var(--color-text); border: 0; }
.mb-home-brand .mb-button-light { background: var(--home-yellow); color: var(--color-on-accent) !important; box-shadow: 0 4px 0 var(--color-yellow-600); }
.mb-home-brand .mb-workshop { border-radius: 22px; transform: rotate(2deg); }
.mb-home-brand .mb-origin-photo > img { border-radius: 28px 120px 28px 28px; border: 8px solid var(--home-cream); }
.mb-home-brand .mb-photo-note { background: var(--home-yellow); border-radius: 8px; font-family: 'Nunito', sans-serif; font-weight: 800; font-style: normal; }
.mb-home-brand .mb-tinibot { background: var(--home-cream); border: 1px solid var(--color-yellow-200); border-radius: 32px; padding: 42px 48px; gap: 34px; }
.mb-home-brand .mb-tinibot-logo { width: 150px; height: 75px; object-fit: contain; display: block; margin-bottom: 24px; }
.mb-home-brand .mb-tinibot figure { background: var(--color-surface); border-radius: 50% 50% 24px 24px; padding: 35px 18px 24px; }
.mb-home-brand .mb-tinibot figure img { transform: none; }
.mb-home-brand .mb-tinibot figcaption { font: 700 .8rem 'Nunito', sans-serif; transform: none; color: var(--color-text-muted); }
.mb-home-brand .mb-button-dark { background: var(--home-blue-text); color: var(--color-on-dark) !important; box-shadow: 0 4px 0 var(--color-blue-900); }
.mb-home-brand .mb-home-faq details { background: var(--color-slate-50); border: 1px solid var(--color-slate-200); padding-inline: 20px; border-radius: 14px; margin-bottom: 12px; }
.mb-home-brand .mb-home-faq summary::after { color: var(--home-blue-text); }
.mb-home-brand .mb-final { background: var(--home-yellow); border: 0; padding-block: 70px; }
.mb-home-brand .mb-final .mb-button { background: var(--color-text); color: var(--color-on-dark) !important; box-shadow: 0 4px 0 var(--color-on-accent); }
.mb-home-brand .mb-final-spark { color: var(--home-blue); }
@media (max-width: 1080px) {
    .mb-home-brand .mb-hero { gap: 35px; }
    .mb-home-brand .mb-hero h1 { font-size: clamp(3rem, 5.3vw, 4rem); }
    .mb-home-brand .mb-code-sticker { right: -10px; width: 190px; }
    .mb-home-brand .mb-class-photo > img { height: 380px; }
    .mb-home-brand .mb-path { padding: 22px; }
    .mb-home-brand .mb-path-top { flex-wrap: wrap; }
}
@media (max-width: 760px) {
    .mb-home-brand .mb-hero { grid-template-columns: 1fr; padding-block: 108px 45px; gap: 48px; min-height: 0; }
    .mb-home-brand .mb-hero h1 { font-size: clamp(2.75rem, 10.8vw, 4.5rem); }
    .mb-home-brand .mb-hero-eyebrow { font-size: .54rem; padding-inline: 10px; letter-spacing: .035em; }
    .mb-home-brand .mb-hero .mb-lead { font-size: 1rem; margin-top: 24px; }
    .mb-home-brand .mb-hero-benefits { font-size: .7rem; gap: 8px 13px; }
    .mb-home-brand .mb-hero-scene { width: calc(100% - 20px); max-width: 440px; padding: 12px 0 48px 12px; }
    .mb-home-brand .mb-hero-scene::before { inset: -3px -8px 21px 0; }
    .mb-home-brand .mb-class-photo > img { height: auto; aspect-ratio: 1; }
    .mb-home-brand .mb-scene-spark { font-size: 4rem; top: -10px; left: 0; }
    .mb-home-brand .mb-code-sticker { right: -12px; bottom: 100px; width: 176px; padding: 10px; }
    .mb-home-brand .mb-code-sticker b { font-size: .63rem; padding: 6px; }
    .mb-home-brand .mb-code-sticker > span { font-size: .52rem; }
    .mb-home-brand .mb-robot-sticker { left: -6px; bottom: 0; }
    .mb-home-brand .mb-class-photo figcaption { font-size: .65rem; }
    .mb-home-brand .mb-belief-strip > .mb-wrap { font-size: .73rem; gap: 12px; }
    .mb-home-brand .mb-belief-strip span::before { color: var(--home-yellow); }
    .mb-home-brand .mb-section { padding-block: 54px; }
    .mb-home-brand .mb-path { padding: 25px; }
    .mb-home-brand .mb-path-top { flex-wrap: nowrap; }
    .mb-home-brand .mb-workshop { transform: none; }
    .mb-home-brand .mb-origin { gap: 30px; }
    .mb-home-brand .mb-tinibot { padding: 28px 24px; border-radius: 24px; }
    .mb-home-brand .mb-tinibot figure { padding: 20px 12px; }
    .mb-home-brand .mb-tinibot-logo { margin-bottom: 20px; }
    .mb-home-brand .mb-home-faq summary { padding-block: 20px; }
    .mb-home-brand .mb-final { padding-block: 50px; }
}

/* Bloque de matemática 1 a 1 en la portada. */
.mb-math { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; margin-top: 10px; margin-bottom: 70px; padding: 44px; border-radius: 32px; background: var(--home-blue); color: var(--color-on-dark); }
.mb-math-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--home-yellow); color: var(--color-slate-900); font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.mb-home.mb-home-brand .mb-math h2 { color: var(--color-on-dark); margin: 16px 0 12px; }
.mb-home.mb-home-brand .mb-math h2 em { color: var(--home-yellow); font-style: normal; }
.mb-home.mb-home-brand .mb-math p { color: color-mix(in srgb, var(--color-on-dark) 85%, transparent); max-width: 560px; }
.mb-math ul { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 16px 0 24px; font-weight: 800; }
.mb-math li::before { content: '✓ '; color: var(--home-yellow); }
.mb-math-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; }
.mb-math-buy strong { font-size: 2.2rem; font-weight: 900; line-height: 1; }
.mb-math-buy small { font-size: .9rem; font-weight: 700; }
.mb-math-board { position: relative; padding: 24px 26px 28px 54px; border-radius: 10px 22px 22px 10px; background: linear-gradient(90deg, transparent 36px, color-mix(in srgb, var(--color-red-400) 55%, transparent) 36px 38px, transparent 38px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-blue-200) 70%, transparent) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-blue-200) 45%, transparent) 0 1px, transparent 1px 26px), var(--color-surface); color: var(--color-slate-900); transform: rotate(1.5deg); box-shadow: 0 20px 44px color-mix(in srgb, var(--color-slate-900) 35%, transparent); }
.mb-math-tag { display: block; padding-bottom: 8px; border-bottom: 2px solid var(--home-blue); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--home-blue); }
.mb-math-exercise { display: block; margin: 16px 0 8px; font-size: 2rem; font-weight: 900; color: var(--color-slate-900); }
.mb-math-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 1.25rem; font-weight: 900; }
.mb-home.mb-home-brand .mb-math .mb-math-steps li { color: var(--color-slate-900); }
.mb-home.mb-home-brand .mb-math .mb-math-steps li::before { content: '→ '; color: var(--home-orange, var(--color-brand-orange)); }
.mb-math-steps b { color: var(--color-danger); }
.mb-math-steps .is-done span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 6px; border-radius: 50%; background: var(--color-success); color: var(--color-on-dark); font-size: .9rem; }
.mb-home.mb-home-brand .mb-math .mb-math-hint { position: absolute; right: -14px; bottom: -22px; width: 160px; margin: 0; padding: 12px 14px; background: var(--home-yellow); color: var(--color-slate-900); font-size: .8rem; font-weight: 800; line-height: 1.35; transform: rotate(-4deg); box-shadow: 0 10px 20px color-mix(in srgb, var(--color-slate-900) 25%, transparent); }
.mb-math-hint small { display: block; font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 860px) { .mb-math { grid-template-columns: 1fr; padding: 30px 22px; border-radius: 24px; } .mb-math-board { transform: none; } }