/* LemonLabs — landing de publicidad (complementa domains.css y site.css) */
.ll-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 24px; }
.ll-pillars div { background: rgba(22, 28, 25, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line-dark); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.ll-pillars span { font-family: var(--mono); font-size: 13px; color: var(--lemon); }
.ll-pillars strong { font-size: 20px; }
.ll-pillars small { color: var(--muted-dark); font-size: 15px; }

.ll-sys { display: flex; flex-direction: column; gap: 18px; }
.ll-sys__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: #fff; }
.ll-sys__item .ll-plan { border: 0; border-radius: 0; }
.ll-sys__brand { padding: 30px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.ll-sys__brand .ll-display { font-size: clamp(32px, 4vw, 44px); }
@media (max-width: 760px) { .ll-sys__item { grid-template-columns: 1fr; } }

.ll-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ll-ticks li { display: flex; gap: 12px; line-height: 1.5; }
.ll-ticks li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #00A37D; margin-top: 7px; }
.ll-ticks--dark li::before { background: var(--lemon); }

.ll-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ll-process li { border: 1px solid var(--line-dark); border-radius: 22px; padding: 26px; }
.ll-process span { font-family: var(--display); font-weight: 800; font-size: 44px; color: var(--lemon); line-height: 1; }
.ll-process h3 { margin: 14px 0 8px; font-size: 22px; }
.ll-process p { margin: 0; color: var(--muted-dark); }

.ll-quote { background: var(--lemon); border-radius: 32px; padding: 48px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.ll-quote .ll-form { background: #fff; border-radius: 24px; padding: 28px; }
.ll-quote__done { flex: 1 1 420px; background: #fff; border-radius: 24px; padding: 32px; }
.ll-quote .ll-err:empty { display: none; }
@media (max-width: 640px) { .ll-quote { padding: 28px 20px; } .ll-quote .ll-form { padding: 20px; } }
.ll-quote__alt { background: #fff; border-radius: 24px; padding: 20px 24px; }
.ll-quote__alt summary { cursor: pointer; font-weight: 700; font-size: 17px; padding: 6px 0; }
.ll-quote__alt[open] summary { margin-bottom: 14px; }
.ll-quote__alt .ll-form { padding: 0; }
.ll-quote__done { padding: 8px 0; }
.ll-sys__brand .ll-btn--ghost { background: rgba(255,255,255,.5); }

/* ===== Brief de diseño ===== */
.bf { padding: 40px 24px 80px; max-width: 980px; }
.bf-form { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 32px; }
.bf-progress { height: 6px; background: var(--paper); border-radius: 999px; overflow: hidden; }
.bf-progress span { display: block; height: 100%; width: 0; background: var(--lemon); transition: width .3s ease; }
.bf-steps { list-style: none; margin: 14px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bf-steps li { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: var(--paper); color: var(--muted); }
.bf-steps li.is-done { background: var(--mint-bg); color: var(--mint-ink); }
.bf-steps li.is-current { background: var(--ink); color: #fff; font-weight: 700; }
.bf-step { border: 0; margin: 0; padding: 0; }
.bf-step legend { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; padding: 0; }
.bf-step legend strong { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; line-height: 1.05; }
.bf-step legend small { color: var(--muted); font-size: 16px; }
.bf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.bf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bf-field--wide { grid-column: 1 / -1; }
.bf-field label:not(.bf-chip):not(.bf-card):not(.bf-drop):not(.ll-check), .bf-label { font-weight: 700; font-size: 15px; }
.bf-field input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]), .bf-field textarea { font: 16px/1.4 var(--body); padding: 13px 14px; border-radius: 12px; border: 1px solid #C9CCC4; background: #fff; width: 100%; }
.bf-field input:focus, .bf-field textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-chip input, .bf-card input { position: absolute; opacity: 0; pointer-events: none; }
.bf-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid #C9CCC4; cursor: pointer; font-size: 15px; }
.bf-chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.bf-chip input:focus-visible + span, .bf-card input:focus-visible ~ span { outline: 2px solid var(--lemon); outline-offset: 2px; }
.bf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bf-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; border: 1.5px solid #DEDBD2; cursor: pointer; font-size: 14px; font-weight: 500; background: #fff; }
.bf-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: #FFFCEB; }
.bf-card:has(input:checked)::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.bf-mini { display: flex; flex-direction: column; gap: 6px; height: 78px; border-radius: 10px; padding: 12px; border: 1px solid rgba(0,0,0,.08); }
.bf-mini i { display: block; height: 8px; border-radius: 4px; }
.bf-mini b { display: block; width: 40%; height: 16px; border-radius: 999px; margin-top: auto; }
.bf-type { font-size: 44px; line-height: 78px; height: 78px; text-align: center; background: var(--paper); border-radius: 10px; }
.bf-icon { height: 78px; display: flex; align-items: center; justify-content: center; background: var(--paper); border-radius: 10px; color: var(--ink); }
.bf-swatch { display: grid; grid-template-columns: repeat(4, 1fr); height: 78px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.bf-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bf-color { position: relative; }
.bf-color input { width: 64px; height: 64px; border: 0; border-radius: 14px; padding: 0; cursor: pointer; background: none; }
.bf-color button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; }
.bf-addcolor { min-height: 64px; padding: 0 16px; border-radius: 14px; border: 1.5px dashed #9AA39F; background: #fff; cursor: pointer; font: 600 14px var(--body); }
.bf-sliders { display: flex; flex-direction: column; gap: 10px; }
.bf-slider { display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; gap: 12px; font-size: 14px; }
.bf-slider span:last-child { text-align: right; }
.bf-slider input { accent-color: #0B0F0D; width: 100%; }
.bf-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px; border: 2px dashed #C9CCC4; border-radius: 18px; background: var(--paper); cursor: pointer; text-align: center; }
.bf-drop.is-over { border-color: var(--ink); background: #FFFCEB; }
.bf-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bf-drop small { color: var(--muted); }
.bf-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-thumb { position: relative; width: 92px; height: 92px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 4px; text-align: center; word-break: break-all; background: #fff; }
.bf-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.bf-thumb button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(11,15,13,.8); color: #fff; cursor: pointer; z-index: 1; }
.bf-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.bf-nav [data-next], .bf-nav [data-submit] { margin-left: auto; }
.bf-done { background: var(--lemon); border-radius: 28px; padding: 48px 32px; }
.bf .ll-err:empty { display: none; }
@media (max-width: 680px) {
    .bf { padding: 24px 12px 64px; }
    .bf-form { padding: 20px 16px; border-radius: 20px; }
    .bf-grid { grid-template-columns: 1fr; }
    .bf-slider { grid-template-columns: 80px 1fr 80px; font-size: 13px; }
    .bf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}