/* Desarrollo — page-unique styles */

.lbp-c-grey   { color: #555; }
.lbp-c-purple { color: #C084FC; }
.lbp-c-blue   { color: #93C5FD; }
.lbp-c-orange { color: #FDBA74; }

/* Hero */
.lbp-dev-hero { background: var(--lbp-bg); }
.lbp-dev-hero__inner {
    max-width: var(--lbp-max);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) var(--lbp-pad-x) clamp(56px, 8vw, 80px);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 5vw, 56px);
    align-items: center;
}
.lbp-dev-hero__meta { color: var(--lbp-fg-muted); font-size: 13px; }
.lbp-dev-hero__title {
    font-size: clamp(40px, 7vw, 82px);
    font-weight: 600;
    letter-spacing: -3.2px;
    line-height: 0.95;
    margin: 0;
    text-wrap: balance;
}
.lbp-dev-hero__sub {
    font-size: 18px;
    color: var(--lbp-fg-soft);
    margin-top: 28px;
    max-width: 560px;
    line-height: 1.5;
    text-wrap: pretty;
}
.lbp-dev-hero__ctas {
    display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap;
}
.lbp-dev-hero__editor {
    background: #1a1a1a;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
}
.lbp-dev-hero__editor .lbp-browser-chrome {
    background: #252525;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lbp-dev-hero__editor .lbp-browser-chrome__title { color: #aaa; }
.lbp-dev-hero__editor .lbp-browser-chrome__right { color: #666; }
.lbp-dev-hero__code {
    padding: 20px;
    font-family: var(--lbp-mono);
    font-size: 12.5px;
    line-height: 1.75;
    color: #E5E5E5;
    margin: 0;
    overflow-x: auto;
    /* Reafirma fondo oscuro: algunos temas inyectan `pre { background: #f5f5f5 }`. */
    background: transparent;
    position: relative;
}
.lbp-dev-hero__code::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 14px;
    background: var(--lbp-accent);
    vertical-align: text-top;
    margin-left: 4px;
    animation: lbpCaret 1s steps(1) infinite;
}
@keyframes lbpCaret {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
/* Línea inferior del editor: log rotativo (uno a la vez, fade in/out).
 * El JS (initDevLogs) cicla los hijos con [data-lbp-dev-log]. */
.lbp-dev-hero__terminal { position: relative; }
.lbp-dev-hero__log {
    transition: opacity .25s ease;
    font-family: var(--lbp-mono);
}
.lbp-dev-hero__log--ok     { color: #22C77E; }
.lbp-dev-hero__log--accent { color: var(--lbp-accent); }
.lbp-dev-hero__log[hidden] { display: none; }
.lbp-dev-hero__terminal {
    padding: 14px 20px;
    background: #0e0e0e;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-family: var(--lbp-mono);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
}
@media (max-width: 980px) {
    .lbp-dev-hero__inner { grid-template-columns: 1fr; }
}

/* Qué construimos */
.lbp-dev-build {
    background: #fff;
    border-top: 1px solid var(--lbp-line);
    border-bottom: 1px solid var(--lbp-line);
    padding: clamp(56px, 8vw, 80px) var(--lbp-pad-x);
}
.lbp-dev-build__inner { max-width: var(--lbp-max); margin: 0 auto; }
.lbp-dev-build__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.lbp-dev-build-card {
    background: #fff;
    border: 1px solid rgba(20,20,20,0.08);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.lbp-dev-build-card:hover {
    background: var(--lbp-bg);
    border-color: var(--lbp-bcolor);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px color-mix(in srgb, var(--lbp-bcolor), transparent 86%);
}
.lbp-dev-build-card__tag {
    position: absolute; top: -12px; right: 20px;
    background: var(--lbp-accent); color: #fff;
    padding: 4px 12px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; font-family: var(--lbp-mono);
}
.lbp-dev-build-card__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.lbp-dev-build-card__chip {
    font-size: 11px; font-weight: 600;
    padding: 5px 10px; border-radius: 999px;
    background: var(--lbp-bbg); color: var(--lbp-bcolor);
    letter-spacing: 0.3px;
}
.lbp-dev-build-card__time {
    font-size: 11px; color: var(--lbp-fg-faint);
}
.lbp-dev-build-card__title {
    font-size: 26px; font-weight: 600; letter-spacing: -0.7px;
    margin: 0 0 4px;
}
.lbp-dev-build-card__price {
    font-size: 13px; color: var(--lbp-bcolor);
    font-weight: 600; margin-bottom: 16px;
}
.lbp-dev-build-card__desc {
    font-size: 14px; color: var(--lbp-fg-soft);
    margin-bottom: 24px; line-height: 1.55;
}
.lbp-dev-build-card__features {
    padding: 20px 0 0;
    border-top: 1px solid rgba(20,20,20,0.08);
    display: flex; flex-direction: column; gap: 10px;
}
.lbp-dev-build-card__features li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--lbp-fg);
}
.lbp-dev-build-card__check {
    width: 16px; height: 16px;
    border-radius: 4px;
    background: var(--lbp-bbg); color: var(--lbp-bcolor);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    flex-shrink: 0;
}
@media (max-width: 1080px) { .lbp-dev-build__grid { grid-template-columns: 1fr; } }

/* Stack */
.lbp-dev-stack { background: var(--lbp-bg); }
.lbp-dev-stack__inner {
    max-width: var(--lbp-max);
    margin: 0 auto;
    padding: clamp(64px, 10vw, 96px) var(--lbp-pad-x);
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.lbp-dev-stack__sub {
    font-size: 16px; color: var(--lbp-fg-soft);
    margin-top: 20px; line-height: 1.55; text-wrap: pretty;
}
.lbp-dev-stack__tabs {
    margin-top: 32px;
    display: flex; flex-direction: column; gap: 10px;
}
.lbp-dev-stack__tab {
    padding: 16px 20px; border-radius: 12px;
    border: 1px solid rgba(20,20,20,0.1);
    background: transparent;
    cursor: pointer; font-family: inherit; text-align: left;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 15px; font-weight: 500;
    color: var(--lbp-fg-muted);
    transition: all .2s;
}
.lbp-dev-stack__tab.is-active {
    border-color: var(--lbp-accent);
    background: #fff;
    color: var(--lbp-fg);
    box-shadow: 0 4px 12px rgba(20,20,20,0.04);
}
.lbp-dev-stack__panels { position: relative; }
.lbp-dev-stack__panel {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--lbp-line);
    box-shadow: 0 10px 40px rgba(20,20,20,0.04);
    display: none;
}
.lbp-dev-stack__panel.is-active { display: block; }
.lbp-dev-stack__panel-eyebrow {
    font-size: 11px; color: var(--lbp-accent);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.lbp-dev-stack__panel-title {
    font-size: 22px; font-weight: 600; letter-spacing: -0.5px;
    margin: 0 0 24px; line-height: 1.2;
}
.lbp-dev-stack__items {
    display: flex; flex-direction: column;
    background: rgba(20,20,20,0.06); border-radius: 12px;
    overflow: hidden;
    gap: 2px;
}
.lbp-dev-stack__row {
    padding: 18px;
    background: #fff;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    align-items: center;
}
.lbp-dev-stack__row-name {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px;
}
.lbp-dev-stack__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--lbp-accent);
}
.lbp-dev-stack__row-ver {
    font-size: 10px; color: var(--lbp-fg-faint);
    padding: 2px 7px; background: rgba(20,20,20,0.04);
    border-radius: 999px; margin-left: 4px;
}
.lbp-dev-stack__row-desc {
    font-size: 12.5px; color: var(--lbp-fg-muted);
    line-height: 1.5; text-wrap: pretty;
}
@media (max-width: 980px) {
    .lbp-dev-stack__inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .lbp-dev-stack__row { grid-template-columns: 1fr; }
}

/* Proceso */
.lbp-dev-proceso {
    background: #fff;
    border-top: 1px solid var(--lbp-line);
    border-bottom: 1px solid var(--lbp-line);
    padding: clamp(56px, 8vw, 80px) var(--lbp-pad-x);
}
.lbp-dev-proceso__inner { max-width: var(--lbp-max); margin: 0 auto; }
.lbp-dev-proceso__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    position: relative;
}
.lbp-dev-proceso__grid::before {
    content: ""; position: absolute;
    top: 20px; left: 40px; right: 40px;
    height: 2px;
    background: repeating-linear-gradient(to right, rgba(20,20,20,0.15) 0 6px, transparent 6px 12px);
    z-index: 0;
}
.lbp-dev-proceso__step { position: relative; z-index: 1; }
.lbp-dev-proceso__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(20,20,20,0.12);
    color: var(--lbp-fg);
    font-size: 13px; font-weight: 600;
    margin-bottom: 16px;
    box-shadow: 0 0 0 4px #fff;
}
.lbp-dev-proceso__step.is-active .lbp-dev-proceso__num {
    background: var(--lbp-accent); color: #fff; border: none;
}
.lbp-dev-proceso__title { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 6px; }
.lbp-dev-proceso__dur {
    font-size: 11px;
    color: var(--lbp-fg-faint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.lbp-dev-proceso__step.is-active .lbp-dev-proceso__dur { color: var(--lbp-accent); }
.lbp-dev-proceso__desc {
    font-size: 13px; color: var(--lbp-fg-muted);
    line-height: 1.55; text-wrap: pretty;
}
.lbp-dev-proceso__bar {
    margin-top: 48px;
    padding: 20px 24px;
    background: var(--lbp-bg);
    border-radius: 14px;
    border: 1px solid var(--lbp-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.lbp-dev-proceso__bar-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--lbp-fg); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.lbp-dev-proceso__bar-text { display: flex; flex-direction: column; }
.lbp-dev-proceso__bar-text strong { font-size: 14px; color: var(--lbp-fg); }
.lbp-dev-proceso__bar-text span   { font-size: 13px; color: var(--lbp-fg-muted); }
.lbp-dev-proceso__bar-meta {
    font-size: 12px; color: var(--lbp-fg-faint);
}
.lbp-dev-proceso__bar-meta strong { color: var(--lbp-fg); }
@media (max-width: 1080px) { .lbp-dev-proceso__grid { grid-template-columns: repeat(3, 1fr); } .lbp-dev-proceso__grid::before { display: none; } }
@media (max-width: 600px)  { .lbp-dev-proceso__grid { grid-template-columns: repeat(2, 1fr); } }

/* Antes / Después */
.lbp-dev-ba { background: var(--lbp-bg); }
.lbp-dev-ba__inner {
    max-width: var(--lbp-max);
    margin: 0 auto;
    padding: clamp(64px, 10vw, 96px) var(--lbp-pad-x);
}
.lbp-beforeafter {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(20,20,20,0.08);
    aspect-ratio: 16 / 8;
    margin-top: 24px;
    user-select: none;
}
.lbp-beforeafter__before,
.lbp-beforeafter__after {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.lbp-beforeafter__before { background: #E8E4DC; }
.lbp-beforeafter__after {
    background: #FFF6F0;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.lbp-beforeafter__before-nav {
    background: #2A3555; color: #fff;
    padding: 14px 24px;
    font: 14px Times, serif;
    display: flex; align-items: center; justify-content: space-between;
}
.lbp-beforeafter__before-brand { font-weight: 700; }
.lbp-beforeafter__before-menu  { font-size: 11px; opacity: 0.8; }
.lbp-beforeafter__before-hero {
    background: linear-gradient(180deg, #C94E7B 0%, #8B3B5D 100%);
    padding: 60px 40px;
    color: #fff;
    font-family: Times, serif;
    text-align: center;
}
.lbp-beforeafter__before-h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 700; }
.lbp-beforeafter__before-sub { font-size: 16px; margin-top: 12px; opacity: 0.9; }
.lbp-beforeafter__before-cta {
    margin-top: 20px;
    background: #FFE600; color: #000;
    padding: 10px 28px;
    border: 3px solid #fff;
    font: 700 16px Times, serif;
    cursor: pointer;
}
.lbp-beforeafter__after-nav {
    background: var(--lbp-fg); color: #fff;
    padding: 16px 32px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px;
}
.lbp-beforeafter__after-brand {
    display: flex; align-items: center; gap: 10px; font-weight: 600;
}
.lbp-beforeafter__after-brand-logo { width: 22px; height: 22px; border-radius: 5px; background: #E8477A; }
.lbp-beforeafter__after-menu {
    display: flex; gap: 20px;
    font-size: 12px; color: rgba(255,255,255,0.7);
}
.lbp-beforeafter__after-btn {
    background: #E8477A; color: #fff;
    border: none; border-radius: 8px;
    padding: 7px 14px; font-size: 12px; font-weight: 600;
}
.lbp-beforeafter__after-hero {
    padding: 48px 40px; color: var(--lbp-fg);
    flex: 1;
}
.lbp-beforeafter__after-h1 {
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 600;
    letter-spacing: -2px;
    line-height: 0.95;
    max-width: 540px;
}
.lbp-beforeafter__after-sub {
    font-size: 14px; color: var(--lbp-fg-soft);
    margin-top: 14px;
    max-width: 380px;
    line-height: 1.5;
}
.lbp-beforeafter__badge {
    position: absolute; top: 20px; left: 20px;
    background: rgba(0,0,0,0.8); color: #fff;
    padding: 6px 12px; border-radius: 999px;
    font-size: 11px; font-family: var(--lbp-mono);
    font-weight: 600; letter-spacing: 0.4px;
    z-index: 5;
}
.lbp-beforeafter__after .lbp-beforeafter__badge {
    left: auto; right: 20px;
    background: var(--lbp-accent);
}
.lbp-beforeafter__range {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: ew-resize;
    margin: 0;
    z-index: 10;
}
.lbp-beforeafter__handle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--lbp-fg);
    pointer-events: none;
    z-index: 6;
}
.lbp-beforeafter::after {
    content: ""; position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 4px; background: #fff;
    transform: translateX(-2px);
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    pointer-events: none;
    z-index: 5;
}

.lbp-dev-ba__metrics {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-top: 24px;
}
.lbp-dev-ba__metric {
    padding: 20px; background: #fff;
    border: 1px solid rgba(20,20,20,0.08);
    border-radius: 14px;
}
.lbp-dev-ba__metric-label {
    font-size: 11px; color: var(--lbp-fg-faint);
    letter-spacing: 0.4px; text-transform: uppercase;
    margin-bottom: 10px;
}
.lbp-dev-ba__metric-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px;
}
.lbp-dev-ba__metric-before { color: var(--lbp-fg-faint); text-decoration: line-through; }
.lbp-dev-ba__metric-arrow  { color: var(--lbp-accent); }
.lbp-dev-ba__metric-after  { color: var(--lbp-fg); font-weight: 600; letter-spacing: -0.2px; }
@media (max-width: 880px) { .lbp-dev-ba__metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lbp-dev-ba__metrics { grid-template-columns: 1fr; } }

/* Planes */
.lbp-dev-planes {
    background: var(--lbp-fg);
    color: #fff;
    padding: clamp(56px, 8vw, 80px) var(--lbp-pad-x);
}
.lbp-dev-planes__inner { max-width: var(--lbp-max); margin: 0 auto; }
.lbp-dev-planes .lbp-section-head--row { margin-bottom: 40px; align-items: flex-start; row-gap: 24px; }
.lbp-dev-planes .lbp-eyebrow--light { color: var(--lbp-accent); }
.lbp-dev-planes .lbp-section-title { color: #fff; max-width: 640px; }
.lbp-dev-planes__sub {
    font-size: 16px; color: rgba(255,255,255,0.65);
    margin-top: 20px; max-width: 560px;
    line-height: 1.55;
}
.lbp-dev-planes__toggle {
    display: inline-flex;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    margin-top: 4px;
    flex-shrink: 0;
}
.lbp-dev-planes__toggle button {
    padding: 10px 16px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
}
.lbp-dev-planes__toggle button.is-active {
    background: #fff; color: var(--lbp-fg); font-weight: 600;
}
.lbp-dev-planes__panel { display: none; }
.lbp-dev-planes__panel.is-active { display: block; }

/* Garantías */
.lbp-dev-gar { background: var(--lbp-bg); }
.lbp-dev-gar__inner {
    max-width: var(--lbp-max);
    margin: 0 auto;
    padding: clamp(64px, 10vw, 96px) var(--lbp-pad-x);
}
.lbp-dev-gar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.lbp-dev-gar__card {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--lbp-line);
    border-radius: 16px;
}
.lbp-dev-gar__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--lbp-accent-soft);
    color: var(--lbp-accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.lbp-dev-gar__title {
    font-size: 18px; font-weight: 600; letter-spacing: -0.3px;
    margin: 0 0 8px;
}
.lbp-dev-gar__body {
    font-size: 13.5px; color: var(--lbp-fg-muted);
    line-height: 1.55; margin: 0;
}
@media (max-width: 980px) { .lbp-dev-gar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lbp-dev-gar__grid { grid-template-columns: 1fr; } }

/* FAQ */
.lbp-dev-faq { background: var(--lbp-bg); }
.lbp-dev-faq__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 96px) var(--lbp-pad-x);
}

/* CTA */
.lbp-dev-cta { background: var(--lbp-bg); }
.lbp-dev-cta__inner {
    max-width: var(--lbp-max);
    margin: 0 auto;
    padding: 0 var(--lbp-pad-x) clamp(64px, 10vw, 96px);
}
.lbp-cta-dark__panel-title {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.lbp-dev-cta__log-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lbp-dev-cta__log-row:last-child { border-bottom: none; }
.lbp-dev-cta__log-status { font-size: 13px; width: 14px; }
.lbp-dev-cta__log-status--success { color: #22C77E; }
.lbp-dev-cta__log-status--accent  { color: var(--lbp-accent); }
.lbp-dev-cta__log-txt {
    flex: 1; font-size: 12px; color: rgba(255,255,255,0.85);
}
.lbp-dev-cta__log-time { font-size: 10px; color: rgba(255,255,255,0.4); }