/* /Components/Case/CasePartView.razor.rz.scp.css */
/* ==========================================================================
   Bloques de las landings de casos (Figma: Card/Info, Tag, Problema, Insight,
   Decisiones, Resultado, Pantallas…). Variables de color: ver CaseStudyPage.razor.css
   ========================================================================== */

/* ---------- Captura recortada ---------- */
.shot[b-s8f6gng6zu] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: inline-size;
}

.shot img[b-s8f6gng6zu] {
    position: absolute;
    left: calc(var(--ox) / var(--bw) * 100cqw);
    top: calc(var(--oy) / var(--bw) * 100cqw);
    width: 100cqw;
    height: calc(var(--ih) / var(--bw) * 100cqw);
    max-width: none;
    object-fit: cover;
}

/* ---------- Tarjetas (Card/Info) ---------- */
.cards[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 24px;
}

.card--borderless[b-s8f6gng6zu] {
    border-color: transparent;
}

.card[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
}

.card__badge[b-s8f6gng6zu] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--badge-bg, var(--accent-soft));
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 16px;
    color: var(--badge-color, var(--accent));
}

.card__title[b-s8f6gng6zu] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    color: var(--ink);
}

.card__text[b-s8f6gng6zu],
.card__list[b-s8f6gng6zu] {
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 28px;
    color: var(--ink-muted);
}

.card__text + .card__list[b-s8f6gng6zu] {
    margin-top: -16px;
}

.card__list li[b-s8f6gng6zu]::before {
    content: "• ";
}

.card__text--after[b-s8f6gng6zu] {
    margin-top: 12px;
}

/* ---------- Tags ---------- */
.tags[b-s8f6gng6zu] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tags li[b-s8f6gng6zu] {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
}

/* ---------- Cita ---------- */
.quote[b-s8f6gng6zu] {
    max-width: 1000px;
    margin: 0;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 40px;
    line-height: 48px;
    color: var(--ink);
}

/* ---------- Proceso (lista numerada) ---------- */
.process[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
    max-width: 1120px;
    margin-left: 68px;
    border-top: 1px solid #d5dac8;
}

.process__step[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    padding: 28px 20px 0;
    border-left: 1px solid #d5dac8;
}

.process__step:first-child[b-s8f6gng6zu] {
    padding-left: 0;
    border-left: 0;
}

.process__num[b-s8f6gng6zu] {
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 22.4px;
    letter-spacing: .56px;
    color: var(--accent-ink);
}

.process__title[b-s8f6gng6zu] {
    padding-top: 20px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 21.6px;
    line-height: 27px;
    color: var(--ink);
}

.process__text[b-s8f6gng6zu] {
    padding-top: 10px;
    font-family: var(--f-body);
    font-size: 14.08px;
    line-height: 22.5px;
    color: #5c5e58;
}

/* ---------- Mapa de flujos por actor ---------- */
.flows[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.flows__legend[b-s8f6gng6zu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -28px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    color: rgba(94, 92, 85, .7);
}

.flows__key[b-s8f6gng6zu] {
    width: 16px;
    height: 16px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    background: #fff;
}

.flows__grid[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.flow[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    border: 1px solid #d6d1c4;
    border-radius: 24px;
    background: #fff;
}

.flow__actor[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--accent);
}

.flow__title[b-s8f6gng6zu] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    color: var(--ink);
}

.flow__screen[b-s8f6gng6zu] {
    position: relative;
    aspect-ratio: 558 / 210;
    overflow: hidden;
    border-radius: 14px;
    background: #f2f2ed;
}

.flow__steps[b-s8f6gng6zu] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
    min-height: 92px;
    padding-top: 6px;
}

/* línea que une los pasos */
.flow__steps[b-s8f6gng6zu]::before {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(50% / var(--steps));
    right: calc(50% / var(--steps));
    height: 4px;
    border-radius: 2px;
    background: #d6d1c4;
}

.flow__steps li[b-s8f6gng6zu] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
    font-family: var(--f-body);
    font-size: 13px;
    line-height: 17px;
    text-align: center;
    color: var(--ink-muted);
}

.flow__dot[b-s8f6gng6zu] {
    width: 16px;
    height: 16px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px #fff;
}

.flow__steps li.is-key .flow__dot[b-s8f6gng6zu] {
    width: 26px;
    height: 26px;
    margin-top: 0;
    border: 5px solid var(--accent);
    background: #fff;
}

.flow__steps li.is-key[b-s8f6gng6zu] {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Capítulos: problema, insight, decisiones, resultado ---------- */
.chapter[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.chapter__row[b-s8f6gng6zu] {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.chapter__row--split[b-s8f6gng6zu] {
    gap: 40px;
    align-items: flex-start;
}

.box[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px;
    border-radius: 24px;
}

.box--problem[b-s8f6gng6zu] {
    flex: 1 1 0;
    border: 1px solid var(--line);
}

.box--on-white[b-s8f6gng6zu] { background: var(--paper); }
.box--on-paper[b-s8f6gng6zu] { background: #fff; }

.box--insight[b-s8f6gng6zu] {
    flex: 0 0 520px;
    gap: 20px;
    background: var(--insight, var(--accent));
}

.box--insight-480[b-s8f6gng6zu] {
    flex-basis: 480px;
}

.box--result-wide[b-s8f6gng6zu] {
    flex: 1 1 auto;
}

.box__text + .box__text[b-s8f6gng6zu] {
    margin-top: -4px;
}

.box--result[b-s8f6gng6zu] {
    flex: 1 1 0;
    padding: 36px;
    background: var(--result-bg, var(--accent-soft));
}

.chapter--result-first .box--problem[b-s8f6gng6zu] {
    flex-basis: 628px;
}

.chapter--result-first .box--result[b-s8f6gng6zu] {
    flex-basis: 604px;
}

.box--result-narrow[b-s8f6gng6zu] {
    flex: 0 0 400px;
    align-self: flex-start;
}

.box__label[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
}

.box__label--red[b-s8f6gng6zu] { color: var(--red); }
.box__label--dark[b-s8f6gng6zu] { color: var(--result-label, var(--accent-dark)); }
.box__label--light[b-s8f6gng6zu] { color: var(--white-65); }
.box__label--primary[b-s8f6gng6zu] { color: #1b4f9c; }
.box__label--accent[b-s8f6gng6zu] { color: var(--accent-ink); }

.box__text[b-s8f6gng6zu] {
    font-family: var(--f-body);
    font-size: 20px;
    line-height: 32px;
    color: var(--ink);
}

.box__text--result[b-s8f6gng6zu] {
    font-weight: 500;
    font-size: 19px;
    line-height: 30px;
}

.box__quote[b-s8f6gng6zu] {
    margin: 0;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 34px;
    line-height: 42px;
    color: #fff;
}

.decisions[b-s8f6gng6zu] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.decisions ol[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.decisions li[b-s8f6gng6zu] {
    display: flex;
    gap: 16px;
    font-family: var(--f-body);
    font-size: 19px;
    line-height: 30px;
    color: var(--ink);
}

.decisions__label[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
    color: var(--accent);
}

.decisions__circle[b-s8f6gng6zu] {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--decision-bg, var(--accent-soft));
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: var(--decision-color, var(--accent));
}

/* Variante del capítulo 01: lista con divisores y cita al costado */
.decisions--lined[b-s8f6gng6zu] {
    flex: 0 1 702px;
    gap: 8px;
}

.decisions__label--muted[b-s8f6gng6zu] {
    padding-top: 12px;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: .96px;
    color: #5c5e58;
}

.decisions--lined ol[b-s8f6gng6zu] {
    gap: 0;
}

.decisions--lined li[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid #d5dac8;
    font-size: 18px;
    line-height: 28.8px;
}

.decisions__num[b-s8f6gng6zu] {
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 20.8px;
    padding-top: 4px;
    color: var(--accent-ink);
}

.insight-quote[b-s8f6gng6zu] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.insight-quote blockquote[b-s8f6gng6zu] {
    max-width: 487px;
    margin: 0;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 37.6px;
    line-height: 47px;
    color: var(--ink);
}

/* ---------- Panel de pantallas (2 × 2) ---------- */
.panel[b-s8f6gng6zu] {
    position: relative;
    margin: 0;
    padding: 36px 48px 48px;
    overflow: hidden;
    border-radius: 32px;
    background: var(--panel);
    isolation: isolate;
}

.panel__glow[b-s8f6gng6zu] {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 790px;
    max-width: none;
    transform: translate(-50%, -46%);
    pointer-events: none;
}

.panel__dot[b-s8f6gng6zu] {
    position: absolute;
    left: -140px;
    bottom: -90px;
    z-index: -1;
    width: 380px;
    max-width: none;
    pointer-events: none;
}

.panel__title[b-s8f6gng6zu] {
    margin-bottom: 33px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .96px;
    color: rgba(255, 255, 255, .75);
}

.panel__grid[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
}

.panel__item[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.panel__frame[b-s8f6gng6zu] {
    position: relative;
    aspect-ratio: 564 / 380;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 40px -8px rgba(0, 31, 13, .35);
}

.panel__badge[b-s8f6gng6zu] {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 6px 15px;
    border-radius: 14px;
    background: #db4538;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    color: #fff;
}

.panel__caption[b-s8f6gng6zu] {
    min-height: 16px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 13px;
    color: #f5f7ed;
}

/* ---------- Versión móvil: cinco celulares ---------- */
.phones[b-s8f6gng6zu] {
    position: relative;
    margin: 0;
    padding: 100px 24px 46px;
    overflow: hidden;
    border-radius: 32px;
    background: color-mix(in srgb, var(--panel) 92%, #2a9a55);
    isolation: isolate;
}

.phones__glow[b-s8f6gng6zu] {
    width: 1022px;
    transform: translate(-50%, -50%);
}

.phones__row[b-s8f6gng6zu] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.phones__item[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-inline: -4px;
}

.phones__item--0[b-s8f6gng6zu] { --w: 176px; --h: 390px; z-index: 1; }
.phones__item--1[b-s8f6gng6zu] { --w: 200px; --h: 440px; z-index: 2; }
.phones__item--2[b-s8f6gng6zu] { --w: 236px; --h: 520px; z-index: 3; margin-inline: -16px; }

.phones__frame[b-s8f6gng6zu] {
    position: relative;
    width: var(--w);
    height: var(--h);
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 24px 48px -8px rgba(0, 31, 13, .4);
}

.phones__label[b-s8f6gng6zu] {
    width: 200px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    color: #f5f7ed;
}

/* ---------- Design system ---------- */
.ds[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 56px;
    border-radius: 32px;
    background: var(--accent);
    color: #fff;
}

.ds__pills[b-s8f6gng6zu] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ds__pills li[b-s8f6gng6zu] {
    padding: 8px 16px;
    border: 1px solid var(--white-30);
    border-radius: 999px;
    background: var(--white-12);
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .78px;
}

.ds__cols[b-s8f6gng6zu] {
    display: flex;
    gap: 56px;
}

.ds__col[b-s8f6gng6zu] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ds__divider[b-s8f6gng6zu] {
    flex: none;
    width: 1px;
    background: var(--white-30);
}

.ds__label[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
    color: var(--white-65);
}

.ds__how[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ds__how li[b-s8f6gng6zu] {
    display: flex;
    gap: 16px;
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 28px;
}

.ds__num[b-s8f6gng6zu] {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--white-12);
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
}

.ds__use h3[b-s8f6gng6zu],
.ds__note h3[b-s8f6gng6zu] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 20px;
}

.ds__use p[b-s8f6gng6zu],
.ds__note p[b-s8f6gng6zu] {
    margin-top: 4px;
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 26px;
    color: rgba(255, 255, 255, .88);
}

.ds__note[b-s8f6gng6zu] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 20px;
    background: var(--white-12);
}

.ds__note h3[b-s8f6gng6zu] {
    flex: none;
}

.ds__note p[b-s8f6gng6zu] {
    margin-top: 0;
}

.decisions__title[b-s8f6gng6zu] {
    display: block;
    font-weight: 700;
}

/* ---------- Imágenes exportadas de Figma ---------- */
.figure[b-s8f6gng6zu] {
    margin: 0;
}

.figure img[b-s8f6gng6zu] {
    width: 100%;
    height: auto;
    border-radius: 24px;
}

.figure--framed[b-s8f6gng6zu] {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
}

.figure--framed img[b-s8f6gng6zu] {
    border-radius: 12px;
}

.figure figcaption[b-s8f6gng6zu] {
    margin-top: 12px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-muted);
}

.figures-row[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* ---------- Datos destacados (Cecotec) ---------- */
.stats[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.stat[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 44px;
    border-radius: 28px;
    color: #fff;
}

.stat__value[b-s8f6gng6zu] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 96px;
    line-height: 100px;
    letter-spacing: -2.88px;
}

.stat__label[b-s8f6gng6zu] {
    font-family: var(--f-body);
    font-size: 22px;
    line-height: 32px;
    color: rgba(255, 255, 255, .88);
}

/* ---------- Mapas de empatía ---------- */
.empathy[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 61px;
    max-width: 1162px;
    margin-inline: auto;
}

.empathy__map[b-s8f6gng6zu] {
    overflow: hidden;
    border: 1px solid var(--accent-soft);
    border-radius: 11px;
    background: var(--ink);
    color: var(--accent-soft);
    font-family: var(--f-ui);
}

.empathy__head[b-s8f6gng6zu] {
    padding: 6px 12px 7px;
    text-align: center;
}

.empathy__head h3[b-s8f6gng6zu] {
    font-weight: 700;
    font-size: 13px;
}

.empathy__head p[b-s8f6gng6zu] {
    font-size: 9px;
    color: #d9ebff;
}

/* Disposición del Figma: piensa arriba, oye/ve a los costados, dice abajo, duele/aspira en la franja inferior */
.empathy__grid[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    grid-template-areas:
        ".    think ."
        "hear photo see"
        ".    say   ."
        "pain pain gain";
    gap: 14px 18px;
    padding: 28px 22px 22px;
    text-align: center;
}

.empathy__item h4[b-s8f6gng6zu] {
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 12px;
}

.empathy__item p[b-s8f6gng6zu] {
    font-size: 10px;
    line-height: 1.4;
}

.empathy__item--0[b-s8f6gng6zu] { grid-area: think; }
.empathy__item--1[b-s8f6gng6zu] { grid-area: hear; align-self: center; }
.empathy__item--2[b-s8f6gng6zu] { grid-area: see; align-self: center; }
.empathy__item--3[b-s8f6gng6zu] { grid-area: say; }
.empathy__item--4[b-s8f6gng6zu],
.empathy__item--5[b-s8f6gng6zu] {
    padding-top: 14px;
    border-top: 1px solid rgba(223, 241, 242, .25);
}
.empathy__item--4[b-s8f6gng6zu] { grid-area: pain; justify-self: start; width: 50%; }
.empathy__item--5[b-s8f6gng6zu] { grid-area: gain; justify-self: stretch; margin-left: -50%; }

.empathy__photo[b-s8f6gng6zu] {
    grid-area: photo;
    justify-self: center;
    align-self: center;
    width: 116px;
    height: 116px;
    border: 3px solid var(--accent-soft);
    border-radius: 50%;
    object-fit: cover;
    background: rgba(223, 241, 242, .15);
}

/* ---------- Curva emocional ---------- */
.journey[b-s8f6gng6zu] {
    margin: 0;
    padding: 36px;
    border: 1px solid #ddd;
    border-radius: 24px;
    background: #fff;
}

.journey__title[b-s8f6gng6zu] {
    margin-bottom: 24px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
    color: #1b4f9c;
}

.journey__scroll[b-s8f6gng6zu] {
    overflow-x: auto;
}

.journey__chart[b-s8f6gng6zu] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(96px, 1fr));
    min-width: 860px;
    /* tres guías horizontales (positiva, neutral, negativa) */
    background:
        linear-gradient(rgba(28, 28, 26, .08), rgba(28, 28, 26, .08)) 0 44px / 100% 1px no-repeat,
        linear-gradient(rgba(28, 28, 26, .08), rgba(28, 28, 26, .08)) 0 122px / 100% 1px no-repeat,
        linear-gradient(rgba(28, 28, 26, .08), rgba(28, 28, 26, .08)) 0 200px / 100% 1px no-repeat;
}

.journey__line[b-s8f6gng6zu] {
    position: absolute;
    left: 0;
    top: 22px;
    width: 100%;
    height: 200px;
    overflow: visible;
    pointer-events: none;
}

.journey__line polyline[b-s8f6gng6zu] {
    fill: none;
    stroke: #1b4f9c;
    stroke-width: 3;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.journey__col[b-s8f6gng6zu] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 322px;
    padding-top: 238px;
    text-align: center;
}

.journey__col--2[b-s8f6gng6zu] {
    border-radius: 16px;
    background: rgba(217, 79, 61, .08);
}

.journey__dot[b-s8f6gng6zu] {
    position: absolute;
    left: 50%;
    width: 26px;
    height: 26px;
    border: 4px solid #fff;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.journey__col--0 .journey__dot[b-s8f6gng6zu] { top: 31px; background: #219466; }
.journey__col--1 .journey__dot[b-s8f6gng6zu] { top: 109px; background: #eba31a; }
.journey__col--2 .journey__dot[b-s8f6gng6zu] { top: 187px; background: #d94f3d; }

.journey__name[b-s8f6gng6zu] {
    padding: 0 6px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 11px;
    line-height: 15px;
    color: var(--ink);
}

.journey__name span[b-s8f6gng6zu] {
    display: block;
}

.journey__mood[b-s8f6gng6zu] {
    margin-top: auto;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
}

.journey__col--0 .journey__mood[b-s8f6gng6zu] { color: #219466; }
.journey__col--1 .journey__mood[b-s8f6gng6zu] { color: #eba31a; }
.journey__col--2 .journey__mood[b-s8f6gng6zu] { color: #d94f3d; }

/* ---------- Tarjetas de cita ---------- */
.qcards[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 24px;
}

.qcard[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 28px;
    border: 1px solid #ddd;
    border-radius: 24px;
    background: #fff;
}

.qcard__label[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
    color: var(--red);
}

.qcard blockquote[b-s8f6gng6zu] {
    margin: 0;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 22px;
    line-height: 30px;
    color: var(--ink);
}

.qcard__note[b-s8f6gng6zu] {
    margin-top: auto;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 11px;
    color: var(--red);
}

.qcard--plain blockquote[b-s8f6gng6zu] {
    font-size: 30px;
    line-height: 38px;
}

/* ---------- Insight + benchmark ---------- */
.box__quote--sm[b-s8f6gng6zu] {
    font-size: 30px;
    line-height: 38px;
}

.box--bench[b-s8f6gng6zu] {
    flex: 1 1 0;
    padding: 36px;
    border: 1px solid #ddd;
    background: #fff;
}

.bench__text[b-s8f6gng6zu] {
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 26px;
    color: var(--ink);
}

.chips[b-s8f6gng6zu] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chips li[b-s8f6gng6zu] {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink);
}

.chips--accent li[b-s8f6gng6zu] {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--accent-dark);
    letter-spacing: .8px;
}

/* ---------- Tabla hallazgo → decisión ---------- */
.findings[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.findings__head[b-s8f6gng6zu],
.findings__row[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: 350px minmax(0, 370px) minmax(0, 432px);
    gap: 16px;
    padding: 0 28px;
}

.findings__head span[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
    color: #1b4f9c;
}

.findings__head span + span[b-s8f6gng6zu] {
    padding-left: 40px;
}

.findings__row[b-s8f6gng6zu] {
    padding-block: 26px;
    border: 1px solid #ddd;
    border-radius: 24px;
    background: #fff;
}

.findings__found[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.findings__phase[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 11px;
    color: var(--red);
}

.findings__quote[b-s8f6gng6zu] {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 20px;
    line-height: 28px;
    color: var(--ink);
}

.findings__opp[b-s8f6gng6zu],
.findings__dec[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 16px;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--ink);
}

.findings__dec[b-s8f6gng6zu] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--accent-dark);
}

.findings__arrow[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-size: 18px;
    line-height: 24px;
    color: var(--accent-dark);
    text-align: center;
}

/* ---------- Técnicas de ideación ---------- */
.techniques[b-s8f6gng6zu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.techniques li[b-s8f6gng6zu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.techniques li:not(:last-child)[b-s8f6gng6zu]::after {
    content: "→";
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--accent-dark);
}

.tech[b-s8f6gng6zu] {
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink);
}

.tech--final[b-s8f6gng6zu] {
    border-color: transparent;
    background: var(--accent-dark);
    color: #fff;
}

/* ---------- Matriz de impacto y viabilidad ---------- */
.matrix[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 36px;
    border: 1px solid #ddd;
    border-radius: 24px;
    background: var(--paper);
}

.matrix figcaption[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.matrix__title[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
    color: #1b4f9c;
}

.matrix__axis[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 11px;
    color: rgba(28, 28, 26, .6);
}

.matrix__grid[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.matrix__cell[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 250px;
    padding: 24px;
    border-radius: 20px;
}

.matrix__label[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 11px;
}

.matrix__cell ul[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.matrix__cell li[b-s8f6gng6zu] {
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 22px;
    color: var(--ink);
}

.matrix__empty[b-s8f6gng6zu] {
    font-family: var(--f-body);
    font-size: 15px;
    color: rgba(28, 28, 26, .55);
}

.lcards[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.lcard[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border: 1px solid #ddd;
    border-radius: 24px;
    background: #fff;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--ink);
}

/* ---------- Contexto AgroCarteira ---------- */
.context[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: minmax(0, 568px) minmax(0, 632px);
    justify-content: space-between;
    gap: 56px;
}

.context__text[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 29px;
    color: var(--ink-muted);
}

.context__panel[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--line);
}

.context__profile[b-s8f6gng6zu] {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.context__profile h3[b-s8f6gng6zu] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--ink);
}

.context__profile p[b-s8f6gng6zu] {
    margin-top: 4px;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--ink-muted);
}

/* ---------- Diagramas de flujo AgroCarteira ---------- */
.fdiagrams[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.fdiagram[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: 260px minmax(0, 868px);
    justify-content: space-between;
    gap: 48px;
    align-items: start;
}

.fdiagram__info h3[b-s8f6gng6zu] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    color: var(--ink);
}

.fdiagram__info p[b-s8f6gng6zu] {
    margin-top: 12px;
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 26px;
    color: var(--ink-muted);
}

.fdiagram__info .fdiagram__meta[b-s8f6gng6zu] {
    margin-top: 16px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .9px;
    color: var(--accent-ink);
}

/* ---------- Entrega a desarrollo ---------- */
.handoff[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
}

.handoff__tag[b-s8f6gng6zu] {
    align-self: flex-start;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--accent-soft);
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--accent-dark);
}

.handoff__title[b-s8f6gng6zu] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    color: var(--ink);
}

.handoff__text[b-s8f6gng6zu] {
    max-width: 900px;
    font-family: var(--f-body);
    font-size: 20px;
    line-height: 32px;
    color: var(--ink-muted);
}

.handoff__conv[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
}

.handoff__conv li[b-s8f6gng6zu] {
    display: flex;
    gap: 14px;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--ink-muted);
}

.handoff__conv strong[b-s8f6gng6zu] {
    display: block;
    font-weight: 700;
    color: var(--ink);
}

/* ---------- Banner design system AgroCarteira ---------- */
.banner[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: minmax(0, 817px) minmax(0, 295px);
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 48px;
    border-radius: 32px;
    background: var(--accent);
    color: #fff;
}

.banner__title[b-s8f6gng6zu] {
    margin: 12px 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
}

.banner__text[b-s8f6gng6zu] {
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 28px;
    color: rgba(255, 255, 255, .88);
}

.banner__chips[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.banner__chips li[b-s8f6gng6zu] {
    padding: 10px 16px;
    border: 1px solid var(--white-30);
    border-radius: 999px;
    background: var(--white-12);
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .9px;
    text-align: center;
}

/* ---------- Panel de cuatro celulares escalonados (Cecotec) ---------- */
.phone-panel[b-s8f6gng6zu] {
    position: relative;
    margin: 0;
    padding: 36px 48px 64px;
    overflow: hidden;
    border-radius: 32px;
}

.phone-panel[b-s8f6gng6zu]::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -200px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.phone-panel__title[b-s8f6gng6zu] {
    position: relative;
    margin-bottom: 16px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, .75);
}

.phone-panel__row[b-s8f6gng6zu] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34.7px;
}

.phone-panel__item[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* las pantallas pares bajan 48px, como en el Figma */
.phone-panel__item:nth-child(even)[b-s8f6gng6zu] {
    margin-top: 48px;
}

.phone-panel__item img[b-s8f6gng6zu] {
    width: 100%;
    height: auto;
    aspect-ratio: 264 / 585;
    border-radius: 33px;
    object-fit: cover;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 24px 48px -6px rgba(0, 0, 0, .38);
}

.phone-panel__caption[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-size: 13px;
    line-height: 1.5;
    color: #f7f2e5;
}

/* ---------- User flows en filas (Cecotec) ---------- */
.uflows[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.uflow[b-s8f6gng6zu] {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
    border: 1px solid #e3e8ea;
    border-radius: 16px;
    background: #fff;
}

.uflow__kicker[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #1b4f9c;
}

.uflow__title[b-s8f6gng6zu] {
    margin-top: 6px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
    color: var(--ink);
}

.uflow__steps[b-s8f6gng6zu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 0;
}

.uflow__steps li[b-s8f6gng6zu] {
    display: flex;
    align-items: center;
}

.uflow__steps li:not(:last-child)[b-s8f6gng6zu]::after {
    content: "→";
    margin: 0 10px;
    font-size: 13px;
    color: var(--ink-muted);
}

.uflow__pill[b-s8f6gng6zu] {
    padding: 8px 12px;
    border: 1px solid #e3e3e0;
    border-radius: 8px;
    background: #fff;
    font-family: var(--f-body);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink);
}

@media (max-width: 767.98px) {
    .uflow[b-s8f6gng6zu] {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}

/* ---------- Imagen en escritorio, HTML en celular ---------- */
.only-mobile[b-s8f6gng6zu] { display: none; }

/* Diagramas de proceso: centrados y sin estirarse más que el diseño */
.only-desktop .figure[b-s8f6gng6zu] {
    max-width: 1100px;
    margin-inline: auto;
}

@media (max-width: 767.98px) {
    .only-desktop[b-s8f6gng6zu] { display: none; }
    .only-mobile[b-s8f6gng6zu] { display: block; }
}

/* ---------- Trade-offs ---------- */
.card--tradeoff[b-s8f6gng6zu] {
    gap: 20px;
}

.tradeoff__num[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 15px;
    color: var(--accent);
}

.tradeoff__group[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tradeoff__label[b-s8f6gng6zu] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .96px;
    color: var(--ink-muted);
}

.tradeoff__text[b-s8f6gng6zu] {
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 26px;
    color: var(--ink);
}

/* ---------- Aprendizajes ---------- */
.quotes[b-s8f6gng6zu] {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 8px;
}

.quotes blockquote[b-s8f6gng6zu] {
    margin: 0;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 44px;
    line-height: 52px;
    color: var(--ink);
}

.quotes blockquote + blockquote[b-s8f6gng6zu] {
    padding-top: 36px;
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   Pantallas intermedias
   ========================================================================== */
@media (max-width: 1199.98px) {
    .process[b-s8f6gng6zu] {
        margin-left: 0;
    }

    .box--insight[b-s8f6gng6zu] {
        flex-basis: 420px;
    }

    .box--result-narrow[b-s8f6gng6zu] {
        flex-basis: 340px;
    }

    .phones__item--0[b-s8f6gng6zu] { --w: 140px; --h: 310px; }
    .phones__item--1[b-s8f6gng6zu] { --w: 160px; --h: 352px; }
    .phones__item--2[b-s8f6gng6zu] { --w: 190px; --h: 418px; }
}

@media (max-width: 1023.98px) {
    .cards[b-s8f6gng6zu],
    .qcards[b-s8f6gng6zu],
    .figures-row[b-s8f6gng6zu],
    .stats[b-s8f6gng6zu],
    .empathy[b-s8f6gng6zu],
    .lcards[b-s8f6gng6zu],
    .context[b-s8f6gng6zu],
    .handoff__conv[b-s8f6gng6zu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .empathy[b-s8f6gng6zu] {
        gap: 24px;
    }

    .fdiagram[b-s8f6gng6zu],
    .banner[b-s8f6gng6zu] {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .findings__head[b-s8f6gng6zu] {
        display: none;
    }

    .findings__row[b-s8f6gng6zu] {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .box--insight-480[b-s8f6gng6zu] {
        flex-basis: auto;
    }

    .process[b-s8f6gng6zu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
        border-top: 0;
    }

    .process__step[b-s8f6gng6zu],
    .process__step:first-child[b-s8f6gng6zu] {
        padding: 20px 20px 0 0;
        border-left: 0;
        border-top: 1px solid #d5dac8;
    }

    .flows__grid[b-s8f6gng6zu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .chapter__row[b-s8f6gng6zu],
    .chapter__row--split[b-s8f6gng6zu] {
        flex-direction: column;
        gap: 24px;
    }

    .box--insight[b-s8f6gng6zu],
    .box--result-narrow[b-s8f6gng6zu],
    .chapter--result-first .box--problem[b-s8f6gng6zu],
    .chapter--result-first .box--result[b-s8f6gng6zu],
    .decisions--lined[b-s8f6gng6zu] {
        flex: 1 1 auto;
        align-self: stretch;
    }

    .ds__cols[b-s8f6gng6zu] {
        flex-direction: column;
        gap: 32px;
    }

    .ds__divider[b-s8f6gng6zu] {
        width: 100%;
        height: 1px;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767.98px) {
    .card[b-s8f6gng6zu] {
        padding: 24px;
    }

    .card__title[b-s8f6gng6zu] {
        font-size: 22px;
        line-height: 28px;
    }

    .card__text[b-s8f6gng6zu],
    .card__list[b-s8f6gng6zu] {
        font-size: 16px;
        line-height: 25px;
    }

    .tags[b-s8f6gng6zu] {
        gap: 8px;
    }

    .tags li[b-s8f6gng6zu] {
        padding: 7px 12px;
        font-size: 12px;
    }

    .quote[b-s8f6gng6zu] {
        font-size: 28px;
        line-height: 34px;
    }

    .process[b-s8f6gng6zu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .flows__legend[b-s8f6gng6zu] {
        margin-top: -12px;
    }

    .flow[b-s8f6gng6zu] {
        padding: 20px;
    }

    .flow__title[b-s8f6gng6zu] {
        font-size: 22px;
        line-height: 28px;
    }

    .flow__steps li[b-s8f6gng6zu] {
        font-size: 11px;
        line-height: 14px;
    }

    .box[b-s8f6gng6zu] {
        padding: 24px;
    }

    .box__text[b-s8f6gng6zu] {
        font-size: 17px;
        line-height: 27px;
    }

    .box__quote[b-s8f6gng6zu],
    .insight-quote blockquote[b-s8f6gng6zu] {
        font-size: 28px;
        line-height: 34px;
    }

    .decisions li[b-s8f6gng6zu] {
        font-size: 16px;
        line-height: 25px;
    }

    .panel[b-s8f6gng6zu] {
        padding: 24px 16px 28px;
        border-radius: 24px;
    }

    .panel__grid[b-s8f6gng6zu] {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .phone-panel[b-s8f6gng6zu] {
        padding: 24px 0 28px;
        border-radius: 24px;
    }

    .phone-panel__title[b-s8f6gng6zu] {
        margin-left: 16px;
    }

    .phone-panel__row[b-s8f6gng6zu] {
        display: flex;
        gap: 16px;
        padding: 0 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .phone-panel__item[b-s8f6gng6zu] {
        flex: 0 0 200px;
        scroll-snap-align: center;
    }

    .phone-panel__item:nth-child(even)[b-s8f6gng6zu] {
        margin-top: 0;
    }

    .panel__caption[b-s8f6gng6zu] {
        font-size: 12px;
    }

    /* Celulares: carrusel horizontal sin superposición */
    .phones[b-s8f6gng6zu] {
        padding: 32px 0 28px;
        border-radius: 24px;
    }

    .phones__row[b-s8f6gng6zu] {
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;
        padding: 0 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .phones__row[b-s8f6gng6zu]::-webkit-scrollbar {
        display: none;
    }

    .phones__item[b-s8f6gng6zu],
    .phones__item--2[b-s8f6gng6zu] {
        margin: 0;
        scroll-snap-align: center;
    }

    .phones__item--0[b-s8f6gng6zu],
    .phones__item--1[b-s8f6gng6zu],
    .phones__item--2[b-s8f6gng6zu] {
        --w: 200px;
        --h: 440px;
    }

    .phones__label[b-s8f6gng6zu] {
        width: auto;
    }

    .stat[b-s8f6gng6zu] {
        padding: 28px;
    }

    .stat__value[b-s8f6gng6zu] {
        font-size: 64px;
        line-height: 68px;
        letter-spacing: -1.8px;
    }

    .stat__label[b-s8f6gng6zu] {
        font-size: 18px;
        line-height: 27px;
    }

    .empathy__grid[b-s8f6gng6zu] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
        gap: 16px;
        padding: 20px;
    }

    .empathy__grid > *[b-s8f6gng6zu] {
        grid-area: auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    .journey[b-s8f6gng6zu] {
        padding: 20px 0 20px 20px;
    }

    .qcard blockquote[b-s8f6gng6zu],
    .qcard--plain blockquote[b-s8f6gng6zu] {
        font-size: 22px;
        line-height: 30px;
    }

    .findings__row[b-s8f6gng6zu] {
        padding: 20px;
    }

    .matrix[b-s8f6gng6zu] {
        padding: 20px;
    }

    .matrix__grid[b-s8f6gng6zu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .matrix__cell[b-s8f6gng6zu] {
        min-height: 0;
    }

    .figure--framed[b-s8f6gng6zu] {
        padding: 12px;
    }

    .fdiagram__info h3[b-s8f6gng6zu] {
        font-size: 24px;
        line-height: 30px;
    }

    .handoff__title[b-s8f6gng6zu],
    .banner__title[b-s8f6gng6zu] {
        font-size: 28px;
        line-height: 34px;
    }

    .handoff__text[b-s8f6gng6zu] {
        font-size: 17px;
        line-height: 27px;
    }

    .banner[b-s8f6gng6zu] {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .ds[b-s8f6gng6zu] {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .ds__how li[b-s8f6gng6zu] {
        font-size: 16px;
        line-height: 25px;
    }

    .ds__note[b-s8f6gng6zu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .quotes[b-s8f6gng6zu] {
        gap: 24px;
    }

    .quotes blockquote[b-s8f6gng6zu] {
        font-size: 30px;
        line-height: 36px;
    }

    .quotes blockquote + blockquote[b-s8f6gng6zu] {
        padding-top: 24px;
    }
}
/* /Components/Pages/CaseStudyPage.razor.rz.scp.css */
/* ==========================================================================
   Landing de caso de estudio · tokens del Figma ("Caso … - Landing")
   Los colores del caso llegan como --accent, --accent-dark, --accent-soft, --accent-ink y --panel.
   ========================================================================== */
.case[b-oxlfcnr7rg] {
    --ink: #1c1c1a;
    --ink-muted: #5e5c55;
    --line: #e2dccf;
    --paper: #fefaf5;
    --cream: #f2ede4;
    --red: #d94f3d;
    --white-12: rgba(255, 255, 255, .12);
    --white-30: rgba(255, 255, 255, .3);
    --white-65: rgba(255, 255, 255, .65);
    /* Contenido de 1256px dentro de un frame de 1518px: 131px de margen. */
    --case-gutter: max(24px, calc((100% - 1256px) / 2));

    background: #fff;
    color: var(--ink);
    font-family: var(--f-body);
}

/* ---------- Hero ---------- */
.case-hero[b-oxlfcnr7rg] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 36px var(--case-gutter) 104px;
    border-radius: 0 0 48px 48px;
    background: var(--accent);
    color: #fff;
}

.case-nav[b-oxlfcnr7rg] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
}

.case-nav__logo[b-oxlfcnr7rg] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 30px;
    color: #fff;
}

.case-nav__links[b-oxlfcnr7rg] {
    display: flex;
    align-items: center;
    gap: 36px;
}

.case-nav__links a[b-oxlfcnr7rg] {
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 17px;
    color: #fff;
    transition: opacity .2s ease;
}

.case-nav__links a:hover[b-oxlfcnr7rg] {
    opacity: .75;
}

.case-nav__links .case-nav__cta[b-oxlfcnr7rg] {
    padding: 10px 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--accent);
}

.case-nav__links .case-nav__cta:hover[b-oxlfcnr7rg] {
    opacity: .9;
}

.case-nav__toggle[b-oxlfcnr7rg] {
    display: none;
}

.case-hero__tags[b-oxlfcnr7rg] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.case-hero__tags li[b-oxlfcnr7rg] {
    padding: 8px 16px;
    border: 1px solid var(--white-30);
    border-radius: 999px;
    background: var(--white-12);
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
}

.case-hero__body[b-oxlfcnr7rg] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Cecotec: texto a la izquierda y mockup a la derecha */
.case-hero__body--split[b-oxlfcnr7rg] {
    display: grid;
    grid-template-columns: minmax(0, 804px) minmax(0, 505px);
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.case-hero__main[b-oxlfcnr7rg] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.case-hero__logo[b-oxlfcnr7rg] {
    position: relative;
    width: var(--logo-w, 360px);
    max-width: 100%;
    aspect-ratio: var(--logo-ratio, 360 / 134);
    overflow: hidden;
}

.case-hero__logo img[b-oxlfcnr7rg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* TodoAgro: el logo es un recorte de una imagen más alta (269,6% de alto, desplazada -85,25%). */
.case-hero__logo--crop img[b-oxlfcnr7rg] {
    position: absolute;
    left: 0;
    top: -85.25%;
    width: 100%;
    height: 269.6%;
    max-width: none;
    object-fit: fill;
}

.case-hero__visual[b-oxlfcnr7rg] {
    width: 100%;
    height: auto;
}

.case-hero__visual--below[b-oxlfcnr7rg] {
    border-radius: 24px;
}

.case-hero__title[b-oxlfcnr7rg] {
    max-width: 1060px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 70px;
    line-height: 78px;
    letter-spacing: -1.4px;
}

.case-hero__facts[b-oxlfcnr7rg] {
    display: grid;
    grid-template-columns: repeat(var(--facts, 5), minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding-top: 36px;
    border-top: 1px solid var(--white-30);
}

.case-hero__facts div[b-oxlfcnr7rg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.case-hero__facts dt[b-oxlfcnr7rg] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1.04px;
    color: var(--white-65);
}

.case-hero__facts dd[b-oxlfcnr7rg] {
    margin: 0;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
}

/* ---------- Secciones ---------- */
.case-section[b-oxlfcnr7rg] {
    padding: 110px var(--case-gutter);
}

.case-section--compact[b-oxlfcnr7rg] {
    padding-block: 50px;
}

.case-section--white[b-oxlfcnr7rg] { background: #fff; }
.case-section--paper[b-oxlfcnr7rg] { background: var(--paper); }
.case-section--cream[b-oxlfcnr7rg] { background: var(--cream); }
.case-section--soft[b-oxlfcnr7rg]  { background: var(--accent-soft); }
.case-section--tint[b-oxlfcnr7rg]  { background: #f5f9fd; }

.case-badge[b-oxlfcnr7rg] {
    align-self: flex-start;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--accent);
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1px;
    color: #fff;
}

/* Resumen y design system: más aire abajo que arriba, como en el Figma */
#resumen[b-oxlfcnr7rg],
#design-system[b-oxlfcnr7rg] {
    padding-bottom: 110px;
}

.case-section__inner[b-oxlfcnr7rg] {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 1256px;
    margin-inline: auto;
}

.case-section__head[b-oxlfcnr7rg] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.case-section__head--aside[b-oxlfcnr7rg] {
    display: grid;
    grid-template-columns: minmax(0, 590px) minmax(0, 625px);
    justify-content: space-between;
    align-items: start;
    gap: 56px;
}

.case-section__heading[b-oxlfcnr7rg] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.case-label[b-oxlfcnr7rg] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1.28px;
    color: var(--ink-muted);
}

.case-section__title[b-oxlfcnr7rg] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 56px;
    color: var(--ink);
}

.case-section__lead[b-oxlfcnr7rg] {
    max-width: 1000px;
    font-family: var(--f-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: var(--ink-muted);
}

.case-section__aside[b-oxlfcnr7rg] {
    width: 100%;
    height: auto;
    margin-top: 51px;
}

/* Los capítulos separan encabezado y contenido con 40px en vez de 48px */
.case-section[id^="capitulo"] .case-section__inner[b-oxlfcnr7rg] {
    gap: 40px;
}

/* ---------- Cierre ---------- */
.case-closing[b-oxlfcnr7rg] {
    padding: 120px var(--case-gutter);
    background: var(--accent);
    color: #fff;
}

.case-closing__inner[b-oxlfcnr7rg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 1256px;
    margin-inline: auto;
}

.case-closing__kicker[b-oxlfcnr7rg] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
    color: var(--white-65);
}

.case-closing h2[b-oxlfcnr7rg] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 60px;
    line-height: 70px;
    letter-spacing: -1.2px;
}

.case-closing p[b-oxlfcnr7rg] {
    max-width: 760px;
    font-family: var(--f-body);
    font-size: 22px;
    line-height: 34px;
    color: rgba(255, 255, 255, .88);
}

.case-closing__actions[b-oxlfcnr7rg] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.case-btn[b-oxlfcnr7rg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 15px 28px;
    border-radius: 999px;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 17px;
    transition: transform .2s ease, background-color .2s ease;
}

.case-btn:hover[b-oxlfcnr7rg] {
    transform: translateY(-2px);
}

.case-btn--solid[b-oxlfcnr7rg] {
    background: #fff;
    color: var(--accent);
}

.case-btn--ghost[b-oxlfcnr7rg] {
    border: 1.5px solid rgba(255, 255, 255, .6);
    color: #fff;
}

.case-btn--ghost:hover[b-oxlfcnr7rg] {
    background: var(--white-12);
}

/* ---------- Footer ---------- */
.case-footer[b-oxlfcnr7rg] {
    padding: 36px var(--case-gutter);
    background: var(--ink);
    color: var(--paper);
}

.case-footer__inner[b-oxlfcnr7rg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1256px;
    margin-inline: auto;
    font-family: var(--f-body);
}

.case-footer a[b-oxlfcnr7rg] {
    font-weight: 600;
    font-size: 16px;
    transition: opacity .2s ease;
}

.case-footer a:hover[b-oxlfcnr7rg] {
    opacity: .7;
}

.case-footer p[b-oxlfcnr7rg] {
    font-weight: 300;
    font-size: 14px;
    opacity: .6;
}

/* ==========================================================================
   Pantallas intermedias
   ========================================================================== */
@media (max-width: 1199.98px) {
    .case-hero__title[b-oxlfcnr7rg] {
        font-size: 56px;
        line-height: 64px;
    }

    .case-hero__facts[b-oxlfcnr7rg] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .case-hero__body--split[b-oxlfcnr7rg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .case-hero__body--split .case-hero__visual[b-oxlfcnr7rg] {
        max-width: 505px;
        justify-self: center;
    }

    .case-section__head--aside[b-oxlfcnr7rg] {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .case-section__aside[b-oxlfcnr7rg] {
        max-width: 625px;
        margin-top: 0;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767.98px) {
    .case[b-oxlfcnr7rg] {
        --case-gutter: 16px;
    }

    .case-hero[b-oxlfcnr7rg] {
        gap: 24px;
        padding: 20px var(--case-gutter) 56px;
        border-radius: 0 0 32px 32px;
    }

    .case-nav__toggle[b-oxlfcnr7rg] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 44px;
        height: 44px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        cursor: pointer;
    }

    .case-nav__toggle span[b-oxlfcnr7rg] {
        display: block;
        height: 2px;
        border-radius: 1px;
        background: var(--accent);
    }

    .case-nav__links[b-oxlfcnr7rg] {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 20;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        min-width: 220px;
        padding: 10px;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 16px 32px rgba(0, 0, 0, .18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }

    .case-nav.is-open .case-nav__links[b-oxlfcnr7rg] {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .2s ease, transform .2s ease;
    }

    .case-nav__links a[b-oxlfcnr7rg] {
        padding: 12px 14px;
        border-radius: 12px;
        color: var(--ink);
    }

    .case-nav__links .case-nav__cta[b-oxlfcnr7rg] {
        padding: 12px 14px;
        text-align: center;
        background: var(--accent);
        color: #fff;
    }

    .case-hero__tags[b-oxlfcnr7rg] {
        gap: 8px;
    }

    .case-hero__tags li[b-oxlfcnr7rg] {
        padding: 6px 12px;
        font-size: 12px;
        letter-spacing: .8px;
    }

    .case-hero__logo[b-oxlfcnr7rg] {
        width: min(240px, var(--logo-w, 240px));
    }

    .case-hero__title[b-oxlfcnr7rg] {
        font-size: 38px;
        line-height: 44px;
        letter-spacing: -.8px;
    }

    .case-hero__facts[b-oxlfcnr7rg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
        padding-top: 24px;
    }

    .case-hero__facts dd[b-oxlfcnr7rg] {
        font-size: 16px;
        line-height: 23px;
    }

    .case-section[b-oxlfcnr7rg],
    .case-section--compact[b-oxlfcnr7rg] {
        padding-block: 56px;
    }

    #resumen[b-oxlfcnr7rg],
    #design-system[b-oxlfcnr7rg] {
        padding-bottom: 56px;
    }

    .case-section__inner[b-oxlfcnr7rg] {
        gap: 32px;
    }

    .case-section[id^="capitulo"] .case-section__inner[b-oxlfcnr7rg] {
        gap: 28px;
    }

    .case-label[b-oxlfcnr7rg] {
        font-size: 13px;
        letter-spacing: 1px;
    }

    .case-section__title[b-oxlfcnr7rg] {
        font-size: 32px;
        line-height: 38px;
    }

    .case-section__lead[b-oxlfcnr7rg] {
        font-size: 17px;
        line-height: 27px;
    }

    .case-closing[b-oxlfcnr7rg] {
        padding-block: 72px;
    }

    .case-closing__kicker[b-oxlfcnr7rg] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.12px;
    color: var(--white-65);
}

.case-closing h2[b-oxlfcnr7rg] {
        font-size: 42px;
        line-height: 48px;
    }

    .case-closing p[b-oxlfcnr7rg] {
        font-size: 18px;
        line-height: 28px;
    }

    .case-footer__inner[b-oxlfcnr7rg] {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .case-btn:hover[b-oxlfcnr7rg] {
        transform: none;
    }
}
/* /Components/Sections/About.razor.rz.scp.css */
.about[b-ytr94ky6c9] {
    padding: 94px var(--gutter) 126px;
    background: var(--c-sand);
}

.about__card[b-ytr94ky6c9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 1232px;
    min-height: 639px;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(28, 28, 26, .1);
    border-radius: var(--radius-card);
    background: var(--c-cream);
    box-shadow: var(--shadow-card);
}

/* ---------- Panel azul: composición fija de 615×640 ---------- */
.about__intro[b-ytr94ky6c9] {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    background: var(--c-blue);
}

.about__quarter[b-ytr94ky6c9] {
    position: absolute;
    top: 0;
    left: 423px;
    width: 192px;
    height: 192px;
    border-bottom-left-radius: 999px;
    background: var(--c-pink);
    opacity: .9;
}

.about__dot[b-ytr94ky6c9] {
    position: absolute;
    left: 482px;
    top: 505px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--c-amber);
    opacity: .9;
}

.about__intro[b-ytr94ky6c9]  .about__memoji {
    left: 390px;
    top: 28px;
}

.about__kicker[b-ytr94ky6c9] {
    position: absolute;
    left: 75px;
    top: 251px;
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 25px;
    border: 1px solid rgba(28, 28, 26, .2);
    border-radius: 999px;
    background: var(--c-yellow);
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-ink);
}

.about__hello[b-ytr94ky6c9] {
    position: absolute;
    left: 75px;
    top: 295px;
    display: flex;
    flex-direction: column;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 80px;
    line-height: 84px;
    letter-spacing: -2px;
    white-space: nowrap;
    color: #fffff5;
}

.about__name[b-ytr94ky6c9] {
    color: var(--c-yellow);
}

.about__tagline[b-ytr94ky6c9] {
    position: absolute;
    left: 82px;
    top: 470px;
    font-family: var(--f-serif);
    font-size: 32px;
    line-height: 35px;
    color: var(--c-cream);
}

.about__tagline em[b-ytr94ky6c9] {
    font-style: italic;
}

/* ---------- Panel crema con pestañas ---------- */
.about__detail[b-ytr94ky6c9] {
    padding: 57px 39px 40px;
}

.about__tabs[b-ytr94ky6c9] {
    position: relative;
    display: flex;
    gap: 8px;
    max-width: 463px;
    padding-bottom: 18px;
    border-bottom: .8px solid rgba(28, 28, 26, .1);
    overflow-x: auto;
    scrollbar-width: none;
}

.about__tabs[b-ytr94ky6c9]::-webkit-scrollbar {
    display: none;
}

.about__tab[b-ytr94ky6c9] {
    flex: none;
    height: 36px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(28, 28, 26, .5);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.about__tab:hover[b-ytr94ky6c9] {
    color: var(--c-ink);
}

.about__tab.is-active[b-ytr94ky6c9] {
    background: var(--c-yellow);
    color: var(--c-ink);
    box-shadow: 0 2px 8px rgba(240, 195, 46, .3);
}

.about__panel:focus-visible[b-ytr94ky6c9] {
    outline-offset: 8px;
    border-radius: 8px;
}

.about__panel--bio[b-ytr94ky6c9] {
    margin: 128px 0 0 41px;
    max-width: 455px;
}

.about__bio[b-ytr94ky6c9] {
    font-family: var(--f-body);
    font-weight: 300;
    font-size: 20px;
    line-height: 32.5px;
    color: rgba(28, 28, 26, .9);
}

.about__bio strong[b-ytr94ky6c9] {
    font-weight: 600;
    color: var(--c-ink);
}

.about__panel--skills[b-ytr94ky6c9] {
    margin: 46px 0 0 3px;
    max-width: 500px;
}

.about__chips[b-ytr94ky6c9] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.about__chip[b-ytr94ky6c9] {
    display: inline-flex;
    align-items: center;
    height: 37.6px;
    padding: 0 20.8px;
    border: .8px solid rgba(28, 28, 26, .2);
    border-radius: 999px;
    font-family: var(--f-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--c-ink);
}

.about__panel--education[b-ytr94ky6c9] {
    margin: 29px 0 0 25px;
}

.about__panel--experience[b-ytr94ky6c9] {
    margin: 28px 0 0 21px;
}

.timeline[b-ytr94ky6c9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timeline__row[b-ytr94ky6c9] {
    display: grid;
    grid-template-columns: 128px 239px;
    column-gap: 16px;
}

.timeline--wide .timeline__row[b-ytr94ky6c9] {
    grid-template-columns: 144px minmax(0, 300px);
}

.timeline__period[b-ytr94ky6c9] {
    padding-top: 5.6px;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .7px;
    color: var(--c-blue);
}

.timeline__title[b-ytr94ky6c9] {
    margin-bottom: 4px;
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
    color: var(--c-ink);
}

.timeline__place[b-ytr94ky6c9] {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 24px;
    line-height: 36px;
    color: rgba(28, 28, 26, .7);
}

/* ---------- Tarjeta apilada (tablet y mobile) ---------- */
@media (max-width: 1179.98px) {
    .about[b-ytr94ky6c9] {
        padding: 48px 16px;
    }

    .about__card[b-ytr94ky6c9] {
        grid-template-columns: minmax(0, 1fr);
        max-width: 640px;
        min-height: 0;
    }

    .about__intro[b-ytr94ky6c9] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        min-height: 0;
        padding: 136px 24px 64px;
    }

    .about__quarter[b-ytr94ky6c9] {
        left: auto;
        right: 0;
        width: 110px;
        height: 110px;
    }

    .about__dot[b-ytr94ky6c9] {
        left: auto;
        top: auto;
        right: -14px;
        bottom: -12px;
        width: 56px;
        height: 56px;
    }

    .about__intro[b-ytr94ky6c9]  .about__memoji {
        --memoji-scale: .4964;
        --memoji-origin: top right;
        left: auto;
        right: 20px;
        top: 16px;
    }

    .about__kicker[b-ytr94ky6c9],
    .about__hello[b-ytr94ky6c9],
    .about__tagline[b-ytr94ky6c9] {
        position: static;
    }

    .about__kicker[b-ytr94ky6c9] {
        height: auto;
        max-width: 100%;
        padding: 9px 17px;
        font-size: 11px;
        white-space: normal;
    }

    .about__hello[b-ytr94ky6c9] {
        font-size: 52px;
        line-height: 56px;
    }

    .about__tagline[b-ytr94ky6c9] {
        font-size: 26px;
        line-height: 30px;
    }

    .about__detail[b-ytr94ky6c9] {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px 24px 32px;
    }

    .about__tabs[b-ytr94ky6c9] {
        max-width: none;
        padding-bottom: 16px;
    }

    .about__panel--bio[b-ytr94ky6c9],
    .about__panel--skills[b-ytr94ky6c9],
    .about__panel--education[b-ytr94ky6c9],
    .about__panel--experience[b-ytr94ky6c9] {
        margin: 0;
        max-width: none;
    }

    .about__bio[b-ytr94ky6c9] {
        font-size: 16px;
        line-height: 26px;
    }

    .timeline__row[b-ytr94ky6c9],
    .timeline--wide .timeline__row[b-ytr94ky6c9] {
        grid-template-columns: 112px minmax(0, 1fr);
        column-gap: 12px;
    }

    .timeline__period[b-ytr94ky6c9] {
        font-size: 12px;
        letter-spacing: .4px;
    }

    .timeline__title[b-ytr94ky6c9] {
        font-size: 16px;
        line-height: 24px;
    }

    .timeline__place[b-ytr94ky6c9] {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 380px) {
    .about__hello[b-ytr94ky6c9] {
        font-size: 44px;
        line-height: 48px;
    }
}
/* /Components/Sections/Contact.razor.rz.scp.css */
.contact[b-aeufbmszb2] {
    padding: 120px var(--gutter);
    background: var(--c-cream);
}

.contact__card[b-aeufbmszb2] {
    position: relative;
    display: flex;
    max-width: 1280px;
    min-height: 666px;
    margin-inline: auto;
    padding: 145px 510px 145px 98px;
}

.contact__bg[b-aeufbmszb2] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(28, 28, 26, .1);
    border-radius: var(--radius-card);
    background: var(--c-orange);
    box-shadow: var(--shadow-card);
}

.contact__blob[b-aeufbmszb2] {
    position: absolute;
}

.contact__blob--amber[b-aeufbmszb2] {
    left: 875.7px;
    top: -202.3px;
    width: 604.565px;
    height: 604.565px;
    border-radius: 50%;
    background: var(--c-amber);
    filter: blur(40.3px);
    opacity: .2;
}

.contact__blob--blue[b-aeufbmszb2] {
    left: -140.4px;
    top: 390.3px;
    width: 414px;
    height: 414px;
    border-radius: 103.5px;
    background: var(--c-blue);
    filter: blur(41.4px);
    opacity: .2;
    transform: rotate(43.25deg);
}

.contact__text[b-aeufbmszb2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    min-width: 0;
    flex: 1;
}

.contact__title[b-aeufbmszb2] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 80px;
    line-height: 84px;
    letter-spacing: -2px;
    color: var(--c-cream);
}

.contact__lead[b-aeufbmszb2] {
    font-family: var(--f-ui);
    font-weight: 300;
    font-size: 24px;
    line-height: 39px;
    color: rgba(254, 250, 245, .9);
}

.contact__actions[b-aeufbmszb2] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact__linkedin[b-aeufbmszb2] {
    flex: none;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border: 1px solid rgba(254, 250, 245, .2);
    border-radius: 999px;
    background: rgba(254, 250, 245, .1);
    transition: background-color .2s ease;
}

.contact__linkedin:hover[b-aeufbmszb2] {
    background: rgba(254, 250, 245, .2);
}

/* Ilustración recortada como en Figma: sobresale 38px por arriba y 10px por abajo */
.contact__avatar[b-aeufbmszb2] {
    position: absolute;
    right: 61px;
    bottom: -10px;
    width: 449px;
    height: 714px;
    overflow: hidden;
    filter: drop-shadow(0 4px 9.8px rgba(0, 0, 0, .25));
    pointer-events: none;
}

.contact__avatar img[b-aeufbmszb2] {
    position: absolute;
    left: -33.63%;
    top: -.03%;
    width: 133.63%;
    height: 100.06%;
    max-width: none;
}

@media (max-width: 1279.98px) {
    .contact__card[b-aeufbmszb2] {
        padding-right: 400px;
        padding-left: 64px;
    }

    .contact__title[b-aeufbmszb2] {
        font-size: 64px;
        line-height: 68px;
    }

    .contact__avatar[b-aeufbmszb2] {
        right: 24px;
        width: 360px;
        height: 572px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 959.98px) {
    .contact[b-aeufbmszb2] {
        padding: 64px 16px;
    }

    .contact__card[b-aeufbmszb2] {
        flex-direction: column;
        gap: 28px;
        max-width: 560px;
        min-height: 0;
        padding: 40px 24px 0;
        overflow: hidden;
        border-radius: var(--radius-card);
    }

    .contact__blob--amber[b-aeufbmszb2] {
        left: 168px;
        top: -108px;
        width: 280px;
        height: 280px;
    }

    .contact__blob--blue[b-aeufbmszb2] {
        left: -195.2px;
        top: 425.5px;
        width: 220px;
        height: 220px;
    }

    .contact__text[b-aeufbmszb2] {
        gap: 28px;
    }

    .contact__title[b-aeufbmszb2] {
        font-size: 48px;
        line-height: 52px;
        letter-spacing: -1.5px;
    }

    .contact__lead[b-aeufbmszb2] {
        font-size: 18px;
        line-height: 28px;
    }

    .contact__actions[b-aeufbmszb2] {
        width: 100%;
    }

    .contact__email[b-aeufbmszb2] {
        flex: 1;
        min-width: 0;
    }

    .contact__avatar[b-aeufbmszb2] {
        position: relative;
        right: auto;
        bottom: auto;
        align-self: center;
        width: 220px;
        height: 350px;
    }
}
/* /Components/Sections/Hero.razor.rz.scp.css */
.hero[b-z7omfousr4] {
    position: relative;
    overflow: hidden;
    min-height: 784px;
    background: var(--c-graphite);
    color: #fff;
}

/* ---------- Manchas de color difuminadas ---------- */
.hero__decor[b-z7omfousr4] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__blob[b-z7omfousr4] {
    position: absolute;
}

.hero__blob--blue[b-z7omfousr4] {
    left: calc(50% - 139.5px);
    top: 97.5px;
    width: 500px;
    height: 500px;
    border-radius: 100px;
    background: #1369b3;
    filter: blur(64px);
    opacity: .2;
    transform: rotate(12deg);
}

.hero__blob--rose[b-z7omfousr4] {
    left: calc(50% + 210.3px);
    top: 92.3px;
    width: 450.4px;
    height: 450.4px;
    border-radius: 259.4px;
    background: #ffd9f2;
    filter: blur(31.1px);
    opacity: .2;
    transform: rotate(11.8deg);
}

.hero__blob--pink[b-z7omfousr4] {
    left: calc(50% + 286px);
    top: 497px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: var(--c-pink);
    filter: blur(64px);
    opacity: .15;
}

/* ---------- Navegación ---------- */
.hero__nav[b-z7omfousr4] {
    position: absolute;
    top: 57px;
    left: 50%;
    z-index: 10;
    width: min(1167px, calc(100% - 48px));
    transform: translateX(calc(-50% + .5px));
}

/* ---------- Contenido ----------
   En el frame de 1534px el texto arranca en x=146 y el avatar termina en x=1363,
   por eso el padding horizontal es asimétrico respecto del centro. */
.hero__inner[b-z7omfousr4] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 704px) auto;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 213px max(24px, calc(50% - 596px)) 114px max(24px, calc(50% - 621px));
}

.hero__content[b-z7omfousr4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.hero__title[b-z7omfousr4] {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 80px;
    line-height: 84px;
    color: #fff;
}

.hero__title em[b-z7omfousr4] {
    font-style: italic;
    color: var(--c-electric);
}

.hero__kw[b-z7omfousr4] {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 60px;
    letter-spacing: -1.5px;
}

.hero__kw--yellow[b-z7omfousr4] {
    color: var(--c-yellow);
}

.hero__kw--pink[b-z7omfousr4] {
    color: var(--c-pink);
}

.hero__ctas[b-z7omfousr4] {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Avatar sin fondo: el video tiene transparencia, así que flota sobre el hero (mismo tamaño que el marco del Figma). */
.hero__avatar[b-z7omfousr4] {
    position: relative;
    flex: none;
    width: 403px;
    aspect-ratio: 900 / 1020;
    background: url("video/hero-avatar-poster.webp") center / contain no-repeat;
}

.hero__avatar-media[b-z7omfousr4] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

/* ---------- Pantallas intermedias ---------- */
@media (max-width: 1279.98px) {
    .hero__inner[b-z7omfousr4] {
        padding-top: 170px;
        padding-bottom: 96px;
    }

    .hero__title[b-z7omfousr4] {
        font-size: 64px;
        line-height: 70px;
    }

    .hero__kw[b-z7omfousr4] {
        font-size: 48px;
        letter-spacing: -1.2px;
    }

    .hero__avatar[b-z7omfousr4] {
        width: 320px;
    }
}

/* ---------- Mobile (Figma: App / Mobile, 390px) ---------- */
@media (max-width: 959.98px) {
    .hero[b-z7omfousr4] {
        min-height: 0;
        padding: 16px 16px 64px;
    }

    .hero__blob--blue[b-z7omfousr4] {
        left: -114.5px;
        top: 167.9px;
        width: 300px;
        height: 300px;
    }

    .hero__blob--rose[b-z7omfousr4] {
        left: 142.9px;
        top: 62px;
        width: 240px;
        height: 240px;
    }

    .hero__blob--pink[b-z7omfousr4] {
        left: 120px;
        top: 520px;
        width: 340px;
        height: 340px;
    }

    .hero__nav[b-z7omfousr4] {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
    }

    .hero__inner[b-z7omfousr4] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        max-width: 560px;
        margin: 32px auto 0;
        padding: 0;
    }

    .hero__avatar[b-z7omfousr4] {
        order: -1;
        width: 220px;
    }

    .hero__content[b-z7omfousr4] {
        align-self: stretch;
    }

    .hero__title[b-z7omfousr4] {
        font-size: 44px;
        line-height: 48px;
    }

    .hero__title br:first-of-type[b-z7omfousr4] {
        display: none;
    }

    .hero__kw[b-z7omfousr4] {
        display: block;
        font-size: 34px;
        letter-spacing: -1px;
    }

    .hero__ctas[b-z7omfousr4] {
        width: 100%;
        gap: 12px;
    }

    .hero__ctas .btn[b-z7omfousr4] {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 16px;
    }

    .hero__ctas .btn--outline[b-z7omfousr4] {
        padding-inline: 14px;
    }
}
/* /Components/Sections/Process.razor.rz.scp.css */
.process[b-9idoun8chg] {
    position: relative;
    overflow: hidden;
    background: var(--c-ink);
    color: #fff;
}

/* ---------- Título ---------- */
.process__title[b-9idoun8chg] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 17px;
    padding-top: 69px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -1.5px;
    color: var(--c-bone);
    text-align: center;
}

.process__title em[b-9idoun8chg] {
    font-family: var(--f-serif);
    font-weight: 400;
    font-style: italic;
    color: var(--c-red);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
}

/* ---------- Nota al pasar por "de diseño" (Figma: Group 1597880995, 435×126) ---------- */
.process__note-anchor[b-9idoun8chg] {
    position: relative;
    display: inline-block;
}

.process__note-trigger[b-9idoun8chg] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: help;
}

.process__note-trigger:focus-visible[b-9idoun8chg] {
    border-radius: 6px;
}

.process__note[b-9idoun8chg] {
    position: absolute;
    left: calc(100% + 48px);
    top: 50%;
    z-index: 6;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 435px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translate(-8px, -50%);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
    pointer-events: none;
}

.process__note-anchor:hover .process__note[b-9idoun8chg],
.process__note-trigger:focus-visible + .process__note[b-9idoun8chg],
.process__note-trigger:focus + .process__note[b-9idoun8chg] {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
    transition: opacity .3s ease, transform .3s ease;
}

.process__note-icon[b-9idoun8chg] {
    flex: none;
    margin-top: 2px;
    fill: none;
    stroke: var(--c-red);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process__note-text[b-9idoun8chg] {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 23px;
    line-height: 25px;
    letter-spacing: 0;
    color: var(--c-cream);
}

.process__note-text em[b-9idoun8chg] {
    font-style: italic;
}

/* Le gana a ".process__title em" (subrayado rojo del título) */
.process__title .process__note-text em[b-9idoun8chg] {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    color: inherit;
}

.process__title .process__note-text .process__note-red[b-9idoun8chg] {
    color: var(--c-red);
}

/* Si no entra a la derecha del título, la nota aparece debajo, centrada */
@media (max-width: 1519.98px) {
    .process__note[b-9idoun8chg] {
        left: 50%;
        top: calc(100% + 18px);
        width: min(435px, calc(100vw - 32px));
        transform: translate(-50%, -6px);
    }

    .process__note-anchor:hover .process__note[b-9idoun8chg],
    .process__note-trigger:focus-visible + .process__note[b-9idoun8chg],
    .process__note-trigger:focus + .process__note[b-9idoun8chg] {
        transform: translate(-50%, 0);
    }

    .process__note[b-9idoun8chg] {
        padding: 18px 20px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 16px;
        background: rgba(42, 42, 40, .96);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    }
}

/* ==========================================================================
   Desktop: escenario fijo de 1534×1031 que se escala en pantallas intermedias
   ========================================================================== */
.process__viewport[b-9idoun8chg] {
    --stage-scale: 1;
    position: relative;
    height: calc(1031px * var(--stage-scale) - 130px * var(--stage-scale));
}

.process__stage[b-9idoun8chg] {
    position: absolute;
    top: calc(-130px * var(--stage-scale));
    left: 50%;
    width: 1534px;
    height: 1031px;
    transform: translateX(-50%) scale(var(--stage-scale));
    transform-origin: top center;
}

.process__stars[b-9idoun8chg] {
    position: absolute;
    left: 1px;
    top: 3px;
    z-index: 3;
    width: 1545px;
    height: 1028px;
    max-width: none;
    pointer-events: none;
}

.orbit[b-9idoun8chg] {
    position: absolute;
    max-width: none;
}

.orbit--1[b-9idoun8chg] {
    left: 605.87px;
    top: 378px;
    width: 288px;
    height: 288px;
}

.orbit--2[b-9idoun8chg] {
    left: 517.87px;
    top: 290px;
    width: 464px;
    height: 464px;
}

.orbit--3[b-9idoun8chg] {
    left: 429.87px;
    top: 202px;
    width: 640px;
    height: 640px;
}

.process__labels[b-9idoun8chg] {
    display: contents;
}

.process__node[b-9idoun8chg] {
    display: contents;
}

.process__line[b-9idoun8chg] {
    position: absolute;
    width: 56px;
    height: 1px;
    background: rgba(255, 255, 255, .2);
}

.process__label[b-9idoun8chg] {
    position: absolute;
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    border: .8px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(28, 28, 26, .85);
    box-shadow: 0 20px 25px rgba(0, 0, 0, .1), 0 8px 10px rgba(0, 0, 0, .1);
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 11px;
    line-height: 16.5px;
    letter-spacing: .55px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}

.planet[b-9idoun8chg] {
    position: absolute;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 50%;
}

.sun[b-9idoun8chg] {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 30.9px #f0b429;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 130 130' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -9.1924 -9.1924 0 65 65)'><stop stop-color='rgba(251,191,36,1)' offset='0.4'/><stop stop-color='rgba(249,115,22,1)' offset='0.4'/><stop stop-color='rgba(250,153,29,1)' offset='0.575'/><stop stop-color='rgba(251,191,36,1)' offset='0.75'/></radialGradient></defs></svg>");
    background-size: 100% 100%;
}

.sun--desktop[b-9idoun8chg] {
    left: 685px;
    top: 459px;
    width: 130px;
    height: 130px;
}

.iteration[b-9idoun8chg] {
    position: absolute;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: .705px solid rgba(217, 79, 61, .4);
    border-radius: 999px;
    background: rgba(28, 28, 26, .9);
    box-shadow: 0 3.527px 17.633px rgba(217, 79, 61, .3);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 10.58px;
    line-height: 14.106px;
    letter-spacing: 1.058px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}

.iteration--desktop[b-9idoun8chg] {
    z-index: 5;
    pointer-events: none;
    left: 703px;
    top: 572px;
    height: 37px;
    padding: 0 14.3px;
}

/* ---------- Planetas (gradientes exactos del Figma) ---------- */
.planet--reunion[b-9idoun8chg] {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -5.0912 -5.0912 0 36 24)'><stop stop-color='rgba(254,240,138,1)' offset='0.067308'/><stop stop-color='rgba(253,231,109,1)' offset='0.16298'/><stop stop-color='rgba(252,222,80,1)' offset='0.25865'/><stop stop-color='rgba(251,213,50,1)' offset='0.35433'/><stop stop-color='rgba(250,204,21,1)' offset='0.45'/><stop stop-color='rgba(251,213,50,1)' offset='0.54904'/><stop stop-color='rgba(252,222,80,1)' offset='0.64808'/><stop stop-color='rgba(253,231,109,1)' offset='0.74712'/><stop stop-color='rgba(254,240,138,1)' offset='0.84615'/></radialGradient></defs></svg>");
    background-size: 100% 100%;
}

.planet--exploracion[b-9idoun8chg] {
    background-image: linear-gradient(135deg, #2bbda6 14.904%, #4bffe3 50%, #2dc2af 81.731%);
}

.planet--analisis[b-9idoun8chg] {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -5.9397 -5.9397 0 18 42)'><stop stop-color='rgba(252,165,165,1)' offset='0.3'/><stop stop-color='rgba(239,68,68,1)' offset='0.3'/><stop stop-color='rgba(242,92,92,1)' offset='0.43774'/><stop stop-color='rgba(246,117,117,1)' offset='0.57548'/><stop stop-color='rgba(252,165,165,1)' offset='0.85096'/></radialGradient></defs></svg>");
    background-size: 100% 100%;
}

.planet--presentacion[b-9idoun8chg] {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -4.2426 -4.2426 0 30 30)'><stop stop-color='rgba(59,130,246,1)' offset='0.3'/><stop stop-color='rgba(37,99,235,1)' offset='0.3'/><stop stop-color='rgba(67,132,243,1)' offset='0.5'/><stop stop-color='rgba(96,165,250,1)' offset='0.7'/><stop stop-color='rgba(59,130,246,1)' offset='0.7'/></radialGradient></defs></svg>");
    background-size: 100% 100%;
}

.planet--testing[b-9idoun8chg] {
    background-image: linear-gradient(to bottom, #5a9ebe 40%, #65c5e3 40%, #367fa2 76.923%);
}

.planet--ajustes[b-9idoun8chg] {
    background-image: linear-gradient(90deg, #f97316 34%, #ea580c 34%, #fdba74 67%, #f97316 67%);
}

.planet--dev[b-9idoun8chg] {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -5.6604 -5.6604 0 12 30)'><stop stop-color='rgba(255,237,213,1)' offset='0.4'/><stop stop-color='rgba(254,212,165,1)' offset='0.50769'/><stop stop-color='rgba(253,186,116,1)' offset='0.61538'/></radialGradient></defs></svg>");
    background-size: 100% 100%;
}

.planet--produccion[b-9idoun8chg] {
    background-image: linear-gradient(to bottom, #22c55e 23.077%, #4ade80 60%, #22c55e 60%);
}

/* Pantallas intermedias: el sistema se escala para que las etiquetas no se corten */
@media (max-width: 1299.98px) {
    .process__viewport[b-9idoun8chg] {
        --stage-scale: .82;
    }
}

@media (max-width: 1099.98px) {
    .process__viewport[b-9idoun8chg] {
        --stage-scale: .7;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
.process__mobile[b-9idoun8chg] {
    display: none;
}

@media (max-width: 959.98px) {
    .process__viewport[b-9idoun8chg] {
        display: none;
    }

    .process__title[b-9idoun8chg] {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-top: 72px;
        font-size: 40px;
        line-height: 46px;
    }

    .process__title em[b-9idoun8chg] {
        font-size: 44px;
        line-height: 46px;
        text-decoration: none;
    }

    /* En celular se toca "de diseño": se marca con un subrayado punteado */
    .process__note-trigger em[b-9idoun8chg] {
        text-decoration: underline dotted;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 6px;
    }

    .process__note-text[b-9idoun8chg] {
        font-size: 19px;
        line-height: 23px;
    }

    .process__mobile[b-9idoun8chg] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 32px 0 64px;
    }

    .process__stars--mobile[b-9idoun8chg] {
        left: calc(50% - 615px);
        top: -164px;
        z-index: 0;
    }

    .system[b-9idoun8chg] {
        position: relative;
        z-index: 1;
        flex: none;
        width: 342px;
        height: 342px;
    }

    .system__ring[b-9idoun8chg] {
        position: absolute;
        max-width: none;
    }

    .sun--mobile[b-9idoun8chg] {
        left: 133px;
        top: 133px;
        width: 76px;
        height: 76px;
    }

    .system__planet[b-9idoun8chg] {
        cursor: pointer;
        transition: transform .2s ease;
    }

    .system__planet:hover[b-9idoun8chg] {
        transform: scale(1.12);
    }

    .system__active[b-9idoun8chg] {
        position: absolute;
        left: 208.34px;
        top: 110.85px;
        width: 40px;
        height: 40px;
        pointer-events: none;
        transition: left .35s ease, top .35s ease;
    }

    .iteration--mobile[b-9idoun8chg] {
        left: 125.29px;
        top: 215px;
        height: 32.41px;
    }

    .steps[b-9idoun8chg] {
        position: relative;
        z-index: 1;
        display: flex;
        gap: 12px;
        width: 100%;
        padding: 0 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 24px;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .steps[b-9idoun8chg]::-webkit-scrollbar {
        display: none;
    }

    .step[b-9idoun8chg] {
        flex: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 272px;
        min-height: 196px;
        padding: 20px 20px 24px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 20px;
        background: rgba(255, 255, 255, .04);
        scroll-snap-align: start;
        transition: border-color .25s ease;
    }

    .step.is-active[b-9idoun8chg] {
        border-color: rgba(255, 255, 255, .35);
    }

    .step__head[b-9idoun8chg] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .step__planet[b-9idoun8chg] {
        position: static;
        width: 32px;
        height: 32px;
    }

    .step__count[b-9idoun8chg] {
        font-family: var(--f-mono);
        font-weight: 500;
        font-size: 11px;
        color: rgba(255, 255, 255, .5);
    }

    .step__name[b-9idoun8chg] {
        font-family: var(--f-display);
        font-weight: 700;
        font-size: 22px;
        line-height: 28px;
        color: var(--c-bone);
    }

    .step__text[b-9idoun8chg] {
        font-family: var(--f-body);
        font-weight: 300;
        font-size: 14px;
        line-height: 22px;
        color: rgba(255, 255, 255, .75);
    }

    .steps__dots[b-9idoun8chg] {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .steps__dot[b-9idoun8chg] {
        width: 6px;
        height: 6px;
        padding: 0;
        border: 0;
        border-radius: 3px;
        background: rgba(255, 255, 255, .25);
        cursor: pointer;
        transition: width .25s ease, background-color .25s ease;
    }

    .steps__dot.is-active[b-9idoun8chg] {
        width: 20px;
        background: rgba(255, 255, 255, .9);
    }
}

/* ==========================================================================
   Interacción desktop: tarjeta flotante al pasar por un planeta (según prototipo)
   ========================================================================== */
.process__planet[b-9idoun8chg] {
    z-index: 4;
    cursor: pointer;
    transition: filter .2s ease;
}

.process__planet:hover[b-9idoun8chg],
.process__planet:focus-visible[b-9idoun8chg] {
    filter: brightness(1.12) drop-shadow(0 0 14px rgba(255, 255, 255, .25));
}

.process__planet:focus-visible[b-9idoun8chg] {
    outline: 2px solid var(--c-yellow);
    outline-offset: 4px;
}

.process__tip[b-9idoun8chg] {
    position: absolute;
    z-index: 6;
    width: 280px;
    padding: 22px 24px 24px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: rgba(42, 42, 40, .96);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35), 0 8px 12px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    pointer-events: none;
}

.process__planet:hover + .process__tip[b-9idoun8chg],
.process__planet:focus-visible + .process__tip[b-9idoun8chg],
.process__label:hover ~ .process__tip[b-9idoun8chg] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease;
}

.process__label[b-9idoun8chg] {
    z-index: 4;
    cursor: default;
}

.process__tip-kicker[b-9idoun8chg] {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--tip-accent);
}

.process__tip-title[b-9idoun8chg] {
    margin: 8px 0 6px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    color: #fff;
}

.process__tip-text[b-9idoun8chg] {
    font-family: var(--f-body);
    font-weight: 300;
    font-size: 14px;
    line-height: 21px;
    color: rgba(255, 255, 255, .7);
}
/* /Components/Sections/Projects.razor.rz.scp.css */
.projects[b-n54uh43pd7] {
    padding: 120px 0 124px;
    background: var(--c-graphite);
    color: #fff;
}

.projects__header[b-n54uh43pd7] {
    margin-bottom: 30px;
}

.projects__title[b-n54uh43pd7] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 64px;
    line-height: 79.2px;
    letter-spacing: -1.8px;
    text-transform: uppercase;
}

.projects__title em[b-n54uh43pd7] {
    font-family: var(--f-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 72px;
    letter-spacing: -1.8px;
    text-transform: lowercase;
    color: var(--c-yellow);
}

.projects__lead[b-n54uh43pd7] {
    max-width: 512px;
    padding-bottom: 13px;
    font-family: var(--f-ui);
    font-weight: 500;
    font-style: italic;
    font-size: 20px;
    line-height: 33px;
    color: rgba(255, 255, 255, .8);
}

.projects__grid[b-n54uh43pd7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 959.98px) {
    .projects[b-n54uh43pd7] {
        padding: 32px 0 72px;
    }

    .projects .container[b-n54uh43pd7] {
        --gutter: 16px;
    }

    .projects__header[b-n54uh43pd7] {
        margin-bottom: 32px;
    }

    .projects__title[b-n54uh43pd7] {
        font-size: 40px;
        line-height: 50px;
        letter-spacing: -1px;
    }

    .projects__title em[b-n54uh43pd7] {
        font-size: 44px;
        letter-spacing: -1px;
    }

    .projects__lead[b-n54uh43pd7] {
        margin-top: 12px;
        padding-bottom: 0;
        font-size: 16px;
        line-height: 24px;
    }

    .projects__grid[b-n54uh43pd7] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* /Components/Sections/SiteFooter.razor.rz.scp.css */
.footer[b-lkvi63x900] {
    padding: 40px 0;
    background: var(--c-ink);
    color: var(--c-cream);
}

.footer__inner[b-lkvi63x900] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 32px;
}

.footer__logo[b-lkvi63x900] {
    font-family: var(--f-logo);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -.6px;
}

.footer__logo span[b-lkvi63x900] {
    color: var(--c-red);
}

.footer__copy[b-lkvi63x900] {
    font-family: var(--f-body);
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    opacity: .6;
}

.footer__made[b-lkvi63x900] {
    font-family: var(--f-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .35px;
}

@media (max-width: 959.98px) {
    .footer[b-lkvi63x900] {
        padding: 32px 0 40px;
    }

    .footer__inner[b-lkvi63x900] {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .footer__logo[b-lkvi63x900] {
        margin-bottom: 0;
    }
}
/* /Components/Sections/SiteNav.razor.rz.scp.css */
.nav[b-3oxsk2xc3k] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    padding: 0 35px 0 32px;
    border: .8px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(241, 236, 227, .8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .1);
}

.nav__logo[b-3oxsk2xc3k] {
    font-family: var(--f-logo);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -.6px;
    color: var(--c-ink);
}

.nav__logo span[b-3oxsk2xc3k] {
    color: var(--c-red);
}

.nav__links[b-3oxsk2xc3k] {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav__link[b-3oxsk2xc3k] {
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .35px;
    color: var(--c-ink);
    transition: opacity .2s ease;
}

.nav__link:hover[b-3oxsk2xc3k] {
    opacity: .65;
}

.nav__link--cta[b-3oxsk2xc3k] {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--c-ink);
    color: var(--c-cream);
}

.nav__link--cta:hover[b-3oxsk2xc3k] {
    opacity: 1;
    background: #34342f;
}

.nav__toggle[b-3oxsk2xc3k] {
    display: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 959.98px) {
    .nav[b-3oxsk2xc3k] {
        height: auto;
        padding: 8px 8px 8px 20px;
        border-radius: 999px;
    }

    .nav__toggle[b-3oxsk2xc3k] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 40px;
        height: 44px;
        padding: 0 11px;
        border: 0;
        border-radius: 999px;
        background: var(--c-ink);
        cursor: pointer;
    }

    .nav__toggle span[b-3oxsk2xc3k] {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 1px;
        background: var(--c-cream);
        transition: transform .25s ease, opacity .2s ease;
    }

    .nav.is-open .nav__toggle span:nth-child(1)[b-3oxsk2xc3k] {
        transform: translateY(6px) rotate(45deg);
    }

    .nav.is-open .nav__toggle span:nth-child(2)[b-3oxsk2xc3k] {
        opacity: 0;
    }

    .nav.is-open .nav__toggle span:nth-child(3)[b-3oxsk2xc3k] {
        transform: translateY(-6px) rotate(-45deg);
    }

    .nav__links[b-3oxsk2xc3k] {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 20;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px;
        border: .8px solid rgba(255, 255, 255, .3);
        border-radius: 24px;
        background: rgba(241, 236, 227, .96);
        box-shadow: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }

    .nav.is-open .nav__links[b-3oxsk2xc3k] {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .2s ease, transform .2s ease;
    }

    .nav__link[b-3oxsk2xc3k] {
        padding: 14px 16px;
        border-radius: 16px;
        font-size: 16px;
    }

    .nav__link--cta[b-3oxsk2xc3k] {
        justify-content: center;
        height: 48px;
        margin-top: 4px;
    }
}
/* /Components/Shared/Memoji.razor.rz.scp.css */
/* Medidas originales del frame desktop (globo de 201.437px). */
.memoji[b-o5itzk0fwx] {
    position: absolute;
    width: 201.437px;
    height: 201.437px;
    transform: scale(var(--memoji-scale, 1));
    transform-origin: var(--memoji-origin, top left);
}

.memoji__bubble[b-o5itzk0fwx] {
    position: absolute;
    inset: 0;
    border-radius: 100.719px 100.719px 100.719px 10.255px;
    background: #fff;
    box-shadow: -2.051px 2.051px 26.048px rgba(0, 0, 0, .25);
}

.memoji__photo[b-o5itzk0fwx] {
    position: absolute;
    left: 5.26px;
    top: 19.89px;
    width: 177.108px;
    height: 177.108px;
    overflow: hidden;
    border-radius: 50%;
}

.memoji__photo img[b-o5itzk0fwx] {
    position: absolute;
    left: -27.1px;
    top: -120.5px;
    width: 238.47px;
    height: 516.484px;
    max-width: none;
    object-fit: cover;
    transform: scaleX(-1);
}
/* /Components/Shared/ProjectCard.razor.rz.scp.css */
.card[b-4bjjzkhipe] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    padding: 40px 40px 42px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius-card);
    background: var(--card-bg);
    color: #fff;
    isolation: isolate;
    transition: transform .25s ease, box-shadow .25s ease;
}

.card__number[b-4bjjzkhipe] {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    place-items: center;
    padding-right: 4px;
    font-family: var(--f-logo);
    font-weight: 900;
    font-size: 200px;
    line-height: 200px;
    color: rgba(255, 255, 255, .03);
    pointer-events: none;
    user-select: none;
}

.card__categories[b-4bjjzkhipe],
.card__tools[b-4bjjzkhipe] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card__category[b-4bjjzkhipe],
.card__tool[b-4bjjzkhipe] {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 17px;
    border-radius: 999px;
    font-family: var(--f-body);
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
}

.card__category[b-4bjjzkhipe] {
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .05);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.card__tool[b-4bjjzkhipe] {
    border: 1px solid #fff;
    font-weight: 600;
}

.card__body[b-4bjjzkhipe] {
    margin-block: auto;
    padding-block: 16px 30px;
}

.card__title[b-4bjjzkhipe] {
    font-family: var(--f-logo);
    font-weight: 700;
    font-size: 36px;
    line-height: 45px;
    text-transform: uppercase;
    max-width: 522px;
}

.card__text[b-4bjjzkhipe] {
    max-width: 384px;
    margin-top: 15px;
    font-family: var(--f-code);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, .7);
}

.card__footer[b-4bjjzkhipe] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.card__link[b-4bjjzkhipe] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--card-btn);
    transition: transform .2s ease;
}

/* Toda la tarjeta lleva al caso: el enlace se estira sobre la tarjeta completa. */
.card--link .card__link[b-4bjjzkhipe]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.card--link:hover[b-4bjjzkhipe] {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.card--link:hover .card__link[b-4bjjzkhipe] {
    transform: scale(1.08) rotate(8deg);
}

.card__link:focus-visible[b-4bjjzkhipe] {
    outline-offset: 4px;
}

.card__soon[b-4bjjzkhipe] {
    flex: none;
    align-self: center;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 959.98px) {
    .card[b-4bjjzkhipe] {
        min-height: 0;
        padding: 24px;
    }

    .card__number[b-4bjjzkhipe] {
        inset: 56px -12px auto auto;
        display: block;
        font-size: 140px;
        line-height: 140px;
        text-align: right;
    }

    .card__body[b-4bjjzkhipe] {
        margin-block: 0;
        padding-block: 20px;
    }

    .card__title[b-4bjjzkhipe] {
        font-size: 26px;
        line-height: 32px;
    }

    .card__text[b-4bjjzkhipe] {
        margin-top: 20px;
        font-size: 14px;
        line-height: 22px;
    }

    .card__footer[b-4bjjzkhipe] {
        align-items: flex-end;
    }

    .card__tools[b-4bjjzkhipe] {
        max-width: 250px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card--link:hover[b-4bjjzkhipe] {
        transform: none;
    }
}