/* ============================================================
 *  LBP Sections — components compartidos
 *  Primitivos que aparecen en >1 página (eyebrow, títulos, cards,
 *  paleta de colores de plugin, marquee genérico, chrome de browser, etc.).
 *  Se carga junto a la página específica vía lbp_sections_use().
 * ============================================================ */

/* ── Eyebrows / títulos ───────────────────────────────────── */
.lbp-eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--lbp-accent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-family: var(--lbp-mono);
}
.lbp-eyebrow--light { color: var(--lbp-accent); }
.lbp-eyebrow--white { color: #fff; }

.lbp-section-title {
    font-size: clamp(28px, 4.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -1.4px;
    color: var(--lbp-fg);
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
}
.lbp-section-title--md { font-size: clamp(26px, 3.8vw, 42px); }
.lbp-section-title--sm { font-size: clamp(24px, 3.2vw, 36px); }

.lbp-accent-italic { color: var(--lbp-accent); font-style: italic; font-weight: 400; }
.lbp-accent-color { color: var(--lbp-accent); }

.lbp-section-head { margin-bottom: 32px; }
.lbp-section-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* ── Reset defensivo para amortiguar temas hostiles ──────
 * Usamos :where() para que el reset tenga especificidad 0,
 * de modo que cualquier regla específica (.lbp-faq__a, .lbp-testimonial, …)
 * con su propio padding gane sin necesidad de !important. */
:where(.lbp p,
.lbp ul,
.lbp ol,
.lbp li,
.lbp h1, .lbp h2, .lbp h3, .lbp h4, .lbp h5, .lbp h6,
.lbp figure,
.lbp blockquote) { margin: 0; padding: 0; }
:where(.lbp ul, .lbp ol) { list-style: none; }
/* Muchos temas pintan `blockquote { border-left: 4px solid #ccc }` y/o
 * `q::before/q::after` con comillas tipográficas. Los aniquilamos en .lbp. */
.lbp blockquote { border: 0; quotes: none; background: transparent; }
.lbp blockquote::before, .lbp blockquote::after { content: none; }
.lbp img { max-width: 100%; height: auto; display: block; }
.lbp button { font-family: inherit; cursor: pointer; }
.lbp input, .lbp textarea, .lbp select { font-family: inherit; }

/* ── Pills, links, botones secundarios ────────────────── */
.lbp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid rgba(20,20,20,0.08);
    border-radius: 999px;
    font-size: 13px;
    color: var(--lbp-fg-soft);
}
.lbp-pill--dark {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
}

.lbp .lbp-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    border: 1px solid var(--lbp-line-strong);
    border-radius: 999px;
    text-decoration: none;
    color: var(--lbp-fg);
    background: transparent;
    transition: background .15s, color .15s;
}
.lbp .lbp-link-pill:hover { background: var(--lbp-fg); color: #fff; }

.lbp-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    flex-wrap: wrap;
}
.lbp-badge-pill {
    background: var(--lbp-accent-soft);
    color: var(--lbp-accent);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 13px;
}
.lbp-badge-pill--mono {
    background: var(--lbp-accent-soft);
    color: var(--lbp-accent);
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-family: var(--lbp-mono);
}

/* ── Plugin color tokens ──────────────────────────────── */
.lbp-color-coral   { background: #FFE8DF; color: #B8421A; }
.lbp-color-violet  { background: #EEE4FF; color: #5B2FB8; }
.lbp-color-emerald { background: #DCF5E8; color: #126B44; }
.lbp-color-amber   { background: #FFEFD0; color: #8A5A00; }
.lbp-color-sky     { background: #DCECFF; color: #14508F; }
.lbp-color-rose    { background: #FFE0EA; color: #A6244D; }
.lbp-color-indigo  { background: #E1E4FF; color: #2E36A6; }
.lbp-color-teal    { background: #D4F0EE; color: #0C6660; }
.lbp-color-lime    { background: #E7F3C8; color: #4B6810; }

/* ── Container ────────────────────────────────────────── */
.lbp-container {
    max-width: var(--lbp-max);
    margin: 0 auto;
    padding-left: var(--lbp-pad-x);
    padding-right: var(--lbp-pad-x);
}
.lbp-container--narrow { max-width: 1080px; }

/* ── Live bar genérica (variantes en cada página) ────── */
.lbp-livebar {
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    font-family: var(--lbp-mono);
}
.lbp-livebar__inner {
    margin: 0 auto;
    padding: 9px clamp(16px, 4vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.lbp-livebar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lbp-livebar__right { display: flex; gap: 24px; opacity: 0.7; }
.lbp-livebar__label { opacity: 0.7; }
.lbp-livebar__value { font-weight: 500; }
.lbp-livebar__sep   { opacity: 0.4; margin: 0 4px; }
@media (max-width: 720px) {
    .lbp-livebar__inner { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px; }
    .lbp-livebar__right { gap: 14px; }
}

/* Livebar global con rotador vertical (shortcode lbp_livebar) */
.lbp-livebar--rotator .lbp-rotator {
    position: relative;
    overflow: hidden;
    line-height: 1.4;
    height: 1.4em;
    flex: 0 1 auto;
    min-width: 0;
}
.lbp-rotator__track {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.lbp-rotator__item {
    height: 1.4em;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .lbp-rotator__track { transition: none; }
}

/* Keyframes del ticker horizontal (modo móvil) */
@keyframes lbp-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Móvil ≤720px (solo livebar global): el rotador pasa a modo "ticker"
 * horizontal — los mensajes corren de derecha a izquierda en una sola
 * línea.  Se oculta la metadata derecha; livedot + "EN VIVO ·" siguen
 * fijos al frente.  Reglas scopeadas a `.lbp-livebar--rotator` para no
 * tocar las livebars per-página, que conservan su layout apilado. */
@media (max-width: 720px) {
    .lbp-livebar--rotator { font-size: 11px; }
    .lbp-livebar--rotator .lbp-livebar__inner {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 9px 16px;
    }
    .lbp-livebar--rotator .lbp-livebar__left {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .lbp-livebar--rotator .lbp-livebar__right { display: none; }

    .lbp-livebar--rotator .lbp-rotator {
        height: 1.4em;
        flex: 1 1 0;
        min-width: 0;
    }
    .lbp-livebar--rotator .lbp-rotator__track {
        display: flex;
        width: max-content;
        animation: lbp-ticker linear infinite;
        animation-duration: 30s;
        will-change: transform;
        transition: none;
    }
    .lbp-livebar--rotator .lbp-rotator__item {
        height: 1.4em;
        line-height: 1.4em;
        flex: 0 0 auto;
        white-space: nowrap;
        padding-right: 24px;
    }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .lbp-livebar--rotator .lbp-rotator__track { animation: none; }
    .lbp-livebar--rotator .lbp-rotator__item:not(:first-child) { display: none; }
}

/* ── Browser chrome (mockups) ─────────────────────────── */
.lbp-browser-chrome {
    padding: 10px 14px;
    border-bottom: 1px solid var(--lbp-line);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F4F1EA;
}
.lbp-browser-chrome__dots {
    display: inline-flex;
    gap: 4px;
}
.lbp-browser-chrome__dots span {
    width: 9px; height: 9px; border-radius: 50%;
}
.lbp-browser-chrome__title {
    flex: 1;
    font-size: 12px;
    color: var(--lbp-fg-muted);
    text-align: center;
}
.lbp-browser-chrome__right {
    font-size: 11px;
    color: var(--lbp-fg-faint);
}

/* ── Plugin card ─────────────────────────────────────── */
.lbp-plugin-card {
    background: #fff;
    border: 1px solid var(--lbp-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
    box-shadow: 0 1px 2px rgba(20,20,20,0.04);
    display: flex;
    flex-direction: column;
}
.lbp-plugin-card:hover {
    transform: translateY(-3px);
    border-color: var(--lbp-line-strong);
    box-shadow: 0 18px 40px rgba(20,20,20,0.10);
}

.lbp-plugin-card__hero {
    height: 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lbp-plugin-card__initial {
    font-size: 112px;
    font-weight: 700;
    letter-spacing: -4px;
    line-height: 1;
    opacity: 0.92;
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.lbp-plugin-card:hover .lbp-plugin-card__initial { transform: scale(1.08) rotate(-3deg); }
.lbp-plugin-card__bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0.16;
    transition: transform .5s;
}
.lbp-plugin-card__bubble--a { top: -30px; right: -30px; width: 90px; height: 90px; }
.lbp-plugin-card__bubble--b { bottom: -20px; left: -20px; width: 60px; height: 60px; opacity: 0.10; }
.lbp-plugin-card:hover .lbp-plugin-card__bubble--a { transform: scale(1.3); }

.lbp-plugin-card__badges {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: flex; gap: 6px; align-items: center; justify-content: space-between;
    z-index: 2;
}
.lbp-plugin-card__cat {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    color: var(--lbp-fg);
    box-shadow: 0 1px 3px rgba(20,20,20,0.08);
    letter-spacing: 0.3px;
}
.lbp-plugin-card__badge {
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
    padding: 4px 9px; border-radius: 999px;
    text-transform: uppercase;
}
.lbp-plugin-card__badge--trending { background: #FFF0D4; color: #8A5A00; }
.lbp-plugin-card__badge--new      { background: #DCF5E8; color: #126B44; }
.lbp-plugin-card__badge--top      { background: rgba(26,26,26,0.92); color: #fff; }

.lbp-plugin-card__body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.lbp-plugin-card__name { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; color: var(--lbp-fg); }
.lbp-plugin-card__tagline { font-size: 13px; color: var(--lbp-fg-muted); line-height: 1.4; margin-top: 4px; }

.lbp-plugin-card__rating {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--lbp-fg-muted);
}
.lbp-plugin-card__rating-num { color: var(--lbp-fg); font-weight: 600; }
.lbp-plugin-card__rating-rev { color: var(--lbp-fg-faint); }

.lbp-plugin-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 4px; padding-top: 12px;
    border-top: 1px solid var(--lbp-line);
}
.lbp-plugin-card__price-row {
    display: flex; align-items: baseline; gap: 6px;
}
.lbp-plugin-card__price-currency { font-size: 13px; color: var(--lbp-fg-faint); font-weight: 500; }
.lbp-plugin-card__price-value    { font-size: 26px; font-weight: 700; color: var(--lbp-fg); letter-spacing: -0.8px; }
.lbp-plugin-card__price-orig     { font-size: 11px; color: var(--lbp-fg-faint); text-decoration: line-through; }
.lbp-plugin-card__price-note     { font-size: 10.5px; color: var(--lbp-success); font-weight: 500; margin-top: 2px; display: inline-block; }
.lbp-plugin-card__cta {
    background: var(--lbp-fg); color: #fff; border: none; border-radius: 10px;
    padding: 10px 16px; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s;
}
.lbp-plugin-card__cta:hover { background: var(--lbp-accent); }

/* ── Trending row ─────────────────────────────────────── */
.lbp-trending-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px;
    border-radius: 10px;
    transition: background .15s;
}
.lbp-trending-row:hover { background: rgba(20,20,20,0.03); }
.lbp-trending-row__thumb {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 22px; letter-spacing: -0.5px;
    flex-shrink: 0;
}
.lbp-trending-row__meta { flex: 1; min-width: 0; }
.lbp-trending-row__title {
    display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
    font-size: 13px; font-weight: 600; color: var(--lbp-fg);
}
.lbp-trending-row__cat { font-size: 11px; font-weight: 400; color: var(--lbp-fg-muted); }
.lbp-trending-row__sub {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--lbp-fg-muted);
}
.lbp-trending-row__star { color: var(--lbp-star); }
.lbp-trending-row__sep  { color: #d4d4d4; }
.lbp-trending-row__price {
    font-size: 14px; font-weight: 700; color: var(--lbp-fg); letter-spacing: -0.3px;
}

/* ── Activity feed ───────────────────────────────────── */
.lbp-activity-feed {
    display: flex; flex-direction: column; gap: 8px;
}
.lbp-activity-feed--compact { gap: 4px; }
.lbp-activity-feed__row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--lbp-line);
    font-size: 13px;
}
.lbp-activity-feed--compact .lbp-activity-feed__row {
    padding: 8px 10px; font-size: 12px;
}
.lbp-activity-feed__avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 11px; flex-shrink: 0;
}
.lbp-activity-feed__text { flex: 1; min-width: 0; line-height: 1.35; color: var(--lbp-fg-muted); }
.lbp-activity-feed__text strong { color: var(--lbp-fg); font-weight: 500; }
.lbp-activity-feed__plugin { color: var(--lbp-accent); font-weight: 500; }
.lbp-activity-feed__when   { color: var(--lbp-fg-faint); font-size: 11px; flex-shrink: 0; }

/* ── Avatar stack ─────────────────────────────────────── */
.lbp-avatar-stack { display: flex; }
.lbp-avatar-stack__item {
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600;
    color: var(--lbp-fg);
}

/* ── FAQ accordion (div+button, animación 100% controlada por JS) ── */
.lbp-faq {
    display: flex; flex-direction: column; gap: 12px;
}
.lbp-faq__item {
    background: var(--lbp-bg);
    border: 1px solid var(--lbp-line);
    border-radius: 14px;
    overflow: hidden;
    transition: background .25s ease, box-shadow .25s ease;
}
.lbp .lbp-faq__head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    gap: 20px;
    color: inherit;
}
.lbp-faq__q {
    font-size: 17px;
    font-weight: 600;
    color: var(--lbp-fg);
    letter-spacing: -0.3px;
}
.lbp-faq__icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(20,20,20,0.06); color: var(--lbp-fg-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
/* Cerrado: max-height 0, padding superior/inferior 0, contenido invisible.
 * El JS lee scrollHeight al abrir y aplica max-height en píxeles para que
 * la animación se ajuste al contenido real (no a un valor mágico fijo). */
.lbp .lbp-faq__a {
    overflow: hidden;
    max-height: 0;
    padding: 0 24px;
    opacity: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1),
                padding    .35s cubic-bezier(.4,0,.2,1),
                opacity    .25s ease;
}
.lbp .lbp-faq__a > p {
    font-size: 14.5px;
    color: var(--lbp-fg-soft);
    line-height: 1.6;
    text-wrap: pretty;
    max-width: 820px;
    margin: 0;
}
.lbp .lbp-faq__item.is-open .lbp-faq__a {
    padding: 0 24px 24px;
    opacity: 1;
}
.lbp-faq__item.is-open {
    background: #fff;
    box-shadow: 0 2px 8px rgba(20,20,20,0.04);
}
.lbp-faq__item.is-open .lbp-faq__icon {
    background: var(--lbp-accent);
    color: #fff;
    transform: rotate(45deg);
}

/* ── Stat row (4-col strip with separators) ─────────── */
.lbp-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(20,20,20,0.08);
    padding-top: 28px;
    margin-top: 56px;
}
.lbp-stat-strip__item { padding-left: 24px; border-left: 1px solid rgba(20,20,20,0.08); }
.lbp-stat-strip__item:first-child { padding-left: 0; border-left: none; }
.lbp-stat-strip__value {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    letter-spacing: -0.8px;
    line-height: 1;
    color: var(--lbp-fg);
}
.lbp-stat-strip__label {
    font-size: 12px;
    color: var(--lbp-fg-muted);
    margin-top: 8px;
    line-height: 1.4;
}
@media (max-width: 880px) {
    .lbp-stat-strip { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .lbp-stat-strip__item { padding-left: 0; border-left: none; }
    .lbp-stat-strip__item:nth-child(3) { padding-top: 0; }
}
@media (max-width: 480px) {
    .lbp-stat-strip { grid-template-columns: 1fr; }
}

/* ── Breadcrumb ────────────────────────────────────────── */
.lbp-breadcrumb {
    padding: 20px var(--lbp-pad-x) 0;
    max-width: var(--lbp-max);
    margin: 0 auto;
    font-size: 12px;
    color: var(--lbp-fg-faint);
    font-family: var(--lbp-mono);
    display: flex;
    align-items: center;
    gap: 8px;
}
.lbp-breadcrumb__current { color: var(--lbp-fg); }

/* ── Newsletter card (dark) ───────────────────────────── */
.lbp-newsletter {
    background: var(--lbp-fg);
    color: #fff;
    border-radius: 16px;
    padding: 24px;
}
.lbp-newsletter__eyebrow {
    font-size: 13px; font-weight: 600;
    color: var(--lbp-accent);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.lbp-newsletter__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin-bottom: 10px;
    text-wrap: balance;
}
.lbp-newsletter__sub {
    font-size: 13px; color: rgba(255,255,255,0.6);
    line-height: 1.5; margin-bottom: 16px;
}
.lbp-newsletter__form {
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 3px;
    display: flex;
    gap: 3px;
}
.lbp-newsletter__input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
}
.lbp-newsletter__input::placeholder { color: rgba(255,255,255,0.4); }
.lbp-newsletter__btn {
    background: var(--lbp-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
}

/* ── Project card (Portafolio + Caso destacado) ──────── */
.lbp-project-card {
    background: #fff;
    border: 1px solid var(--lbp-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
    box-shadow: 0 1px 2px rgba(20,20,20,0.03);
    display: flex; flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.lbp-project-card:hover {
    transform: translateY(-4px);
    border-color: var(--lbp-line-strong);
    box-shadow: 0 20px 40px rgba(20,20,20,0.1);
}
.lbp-project-card__hero {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.lbp-project-card__hero-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.lbp-project-card:hover .lbp-project-card__hero-img { transform: scale(1.04); }
.lbp-project-card__hero-initial {
    font-size: 180px;
    font-weight: 700;
    letter-spacing: -6px;
    line-height: 1;
    opacity: 0.18;
}
.lbp-project-card__hero-bubble {
    position: absolute; top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    opacity: 0.22;
}
.lbp-project-card__badges {
    position: absolute; top: 14px; left: 14px;
    display: flex; gap: 6px; z-index: 2;
}
.lbp-project-card__featured {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
    padding: 4px 9px; border-radius: 999px;
    background: var(--lbp-accent); color: #fff;
    font-family: var(--lbp-mono); text-transform: uppercase;
}
.lbp-project-card__cat,
.lbp-project-card__year {
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
    padding: 4px 9px; border-radius: 999px;
    font-family: var(--lbp-mono);
}
.lbp-project-card__cat   { background: rgba(255,255,255,0.95); color: var(--lbp-fg); }
.lbp-project-card__year  { background: rgba(20,20,20,0.92); color: #fff; }
.lbp-project-card__body  {
    padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.lbp-project-card__industry {
    font-size: 11px; color: var(--lbp-fg-faint);
    font-family: var(--lbp-mono);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.lbp-project-card__name {
    font-size: clamp(18px, 2.4vw, 28px);
    font-weight: 600; letter-spacing: -0.5px; line-height: 1.15;
    margin: 0;
}
.lbp-project-card__tagline {
    font-size: 14px; color: var(--lbp-fg-soft);
    margin-top: 8px; line-height: 1.45; text-wrap: pretty;
}
.lbp-project-card__chips {
    display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.lbp-project-card__chip {
    font-size: 11px; font-weight: 500;
    padding: 4px 9px; border-radius: 999px;
}
.lbp-project-card__metrics {
    display: flex; gap: 20px; margin-top: auto;
    padding-top: 16px; border-top: 1px solid var(--lbp-line);
}
.lbp-project-card__metric { flex: 1; }
.lbp-project-card__metric-value {
    font-size: 20px; font-weight: 600; letter-spacing: -0.4px; line-height: 1;
}
.lbp-project-card__metric-label {
    font-size: 11px; color: var(--lbp-fg-faint);
    margin-top: 4px; line-height: 1.3;
}

/* ── Marquee (Agencia + Home + Portafolio) ──────────── */
.lbp-marquee-section {
    background: var(--lbp-bg);
    padding: 24px 0 clamp(56px, 8vw, 88px);
    overflow: hidden;
}
.lbp-marquee-section__head {
    max-width: var(--lbp-max);
    margin: 0 auto 28px;
    padding: 0 var(--lbp-pad-x);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.lbp-marquee-section__meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.lbp-marquee-wrap { position: relative; }
.lbp-marquee-wrap::before,
.lbp-marquee-wrap::after {
    content: ""; position: absolute; top: 0; bottom: 0;
    width: 80px; z-index: 2; pointer-events: none;
}
.lbp-marquee-wrap::before { left: 0;  background: linear-gradient(to right, var(--lbp-bg), transparent); }
.lbp-marquee-wrap::after  { right: 0; background: linear-gradient(to left,  var(--lbp-bg), transparent); }
.lbp-marquee-track {
    display: flex; gap: 20px; width: max-content;
    animation: lbpMarquee 44s linear infinite;
}
.lbp-marquee-wrap:hover .lbp-marquee-track { animation-play-state: paused; }

/* ── CTA dark band (closing-card pattern) ─────────── */
.lbp-cta-dark {
    background: var(--lbp-fg);
    color: #fff;
    border-radius: 24px;
    padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 56px);
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    position: relative;
    overflow: hidden;
}
.lbp-cta-dark::before {
    content: ""; position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: var(--lbp-accent);
    opacity: 0.22; filter: blur(20px);
    pointer-events: none;
}
.lbp-cta-dark__copy { position: relative; }
.lbp .lbp-cta-dark__title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 600;
    letter-spacing: -2px;
    line-height: 1;
    margin: 0;
    max-width: 640px;
    color: #fff;
}
.lbp-cta-dark__sub {
    font-size: 17px;
    color: rgba(255,255,255,0.7);
    margin-top: 24px;
    line-height: 1.5;
    max-width: 540px;
}
.lbp-cta-dark__ctas {
    display: flex; gap: 12px; margin-top: 32px;
    align-items: center; flex-wrap: wrap;
}
.lbp-cta-dark__aside { position: relative; }
.lbp-cta-dark__panel {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px;
}
@media (max-width: 880px) {
    .lbp-cta-dark { grid-template-columns: 1fr; }
}

/* ── Pricing/plan card grid ───────────────────────── */
.lbp-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.lbp-plan-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 28px;
    position: relative;
    transition: transform .25s;
    color: #fff;
}
.lbp-plan-card:hover { transform: translateY(-6px); }
.lbp-plan-card--featured {
    background: var(--lbp-accent);
    border-color: transparent;
}
.lbp-plan-card__name {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-family: var(--lbp-mono);
}
.lbp-plan-card--featured .lbp-plan-card__name { color: rgba(255,255,255,0.85); }
.lbp-plan-card__price {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 600;
    letter-spacing: -1px;
    color: #fff;
    line-height: 1;
}
.lbp-plan-card__time {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    font-family: var(--lbp-mono);
    margin-top: 6px;
}
.lbp-plan-card--featured .lbp-plan-card__time { color: rgba(255,255,255,0.7); }
.lbp-plan-card__desc {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    margin-top: 16px;
    line-height: 1.5;
    text-wrap: pretty;
}
.lbp-plan-card--featured .lbp-plan-card__desc { color: rgba(255,255,255,0.9); }
.lbp-plan-card__btn {
    margin-top: 20px;
    width: 100%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.lbp-plan-card--featured .lbp-plan-card__btn {
    background: #fff;
    color: var(--lbp-fg);
    border-color: transparent;
}
.lbp-plan-card__features {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lbp-plan-card--featured .lbp-plan-card__features { border-top-color: rgba(255,255,255,0.2); }
.lbp-plan-card__feat {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.85);
}
.lbp-plan-card--featured .lbp-plan-card__feat { color: #fff; }
.lbp-plan-card__feat-icon {
    color: var(--lbp-accent);
    font-weight: 700;
    width: 14px; text-align: center;
}
.lbp-plan-card--featured .lbp-plan-card__feat-icon { color: #fff; }
.lbp-plan-card__feat--out {
    color: rgba(255,255,255,0.35);
}
.lbp-plan-card__featured-tag {
    position: absolute; top: -12px; left: 24px;
    background: #fff; color: var(--lbp-fg);
    padding: 4px 12px; border-radius: 999px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase;
    font-family: var(--lbp-mono);
}
@media (max-width: 1100px) { .lbp-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lbp-plan-grid { grid-template-columns: 1fr; } }

/* ── Process timeline (steps con números) ─────────── */
.lbp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--lbp-line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.lbp-steps__item {
    padding: 32px 28px;
    border-right: 1px solid var(--lbp-line);
    position: relative;
}
.lbp-steps__item:last-child { border-right: none; }
.lbp-steps__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.lbp-steps__num {
    font-size: 12px; font-weight: 600; color: var(--lbp-accent);
    font-family: var(--lbp-mono);
}
.lbp-steps__dur {
    font-size: 11px; color: var(--lbp-fg-faint);
    font-family: var(--lbp-mono);
    padding: 3px 8px; background: rgba(20,20,20,0.04);
    border-radius: 999px;
}
.lbp-steps__title {
    font-size: 19px; font-weight: 600; letter-spacing: -0.4px;
    margin: 0 0 8px;
}
.lbp-steps__desc {
    font-size: 13.5px; color: var(--lbp-fg-muted);
    line-height: 1.55; text-wrap: pretty;
}
@media (max-width: 1100px) {
    .lbp-steps { grid-template-columns: repeat(2, 1fr); }
    .lbp-steps__item:nth-child(2n) { border-right: none; }
    .lbp-steps__item:nth-child(-n+2) { border-bottom: 1px solid var(--lbp-line); }
}
@media (max-width: 640px) {
    .lbp-steps { grid-template-columns: 1fr; }
    .lbp-steps__item { border-right: none; border-bottom: 1px solid var(--lbp-line); }
    .lbp-steps__item:last-child { border-bottom: none; }
}

/* ── Testimonios genéricos ────────────────────────── */
.lbp-testimonial {
    background: #fff;
    border: 1px solid var(--lbp-line);
    border-radius: 16px;
    padding: 24px;
    margin: 0;
    display: flex; flex-direction: column; gap: 16px;
}
.lbp-testimonial__quote {
    font-size: 15px;
    color: var(--lbp-fg);
    line-height: 1.5; margin: 0;
    text-wrap: pretty; flex: 1;
}
.lbp-testimonial__author {
    display: flex; align-items: center; gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--lbp-line);
}
.lbp-testimonial__avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.lbp-testimonial__name { display: block; font-size: 14px; font-weight: 600; color: var(--lbp-fg); }
.lbp-testimonial__role { display: block; font-size: 12px; color: var(--lbp-fg-faint); }

/* ── Mock dashboards / panels (dark) ─────────────── */
.lbp-mock-panel {
    background: #0D1117;
    color: #fff;
    border-radius: 20px;
    padding: 28px;
    font-family: var(--lbp-mono);
    border: 1px solid rgba(255,255,255,0.06);
}
.lbp-mock-panel__title {
    font-size: 11px;
    color: #8B949E;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.lbp-mock-panel__big {
    font-size: 24px; font-weight: 600;
    letter-spacing: -0.5px; line-height: 1;
}
.lbp-mock-panel__big--success { color: #58D68D; }
.lbp-mock-panel__big--accent  { color: var(--lbp-accent); }
.lbp-mock-panel__log {
    background: #161B22;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 11.5px;
    line-height: 1.9;
    border: 1px solid rgba(255,255,255,0.05);
    color: #8B949E;
}
.lbp-mock-panel__log .lbp-mock-panel__ok  { color: #58D68D; }
.lbp-mock-panel__log .lbp-mock-panel__wrn { color: #FFA657; }
.lbp-mock-panel__log .lbp-mock-panel__err { color: #FF5F57; }