/* La Máquina Quiz Widget — assets/lamaquina-quiz.css */

:root {
    --lm-bk: #0a0a0a;
    --lm-y:  #FFE033;
    --lm-pk: #FF3CAC;
    --lm-w:  #F4F0E8;
    --lm-g:  #161616;
}

.lm-widget {
    background: var(--lm-bk);
    color: var(--lm-w);
    font-family: 'Space Grotesk', sans-serif;
    border: 2px solid #222;
    margin: 2rem 0;
    max-width: 680px;
}

/* Header */
.lm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem 1.1rem;
    border-bottom: 1px solid #222;
    background: #0e0e0e;
}
.lm-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem; letter-spacing: .05em; color: #555;
}
.lm-logo span { color: var(--lm-y); }
.lm-prog-track { flex: 1; height: 2px; background: #1e1e1e; margin: 0 1rem; }
.lm-prog-fill  { height: 100%; background: var(--lm-y); transition: width .35s ease; }
.lm-step-lbl   { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #333; }

/* Body */
.lm-body { padding: 1.25rem; }

.lm-step { display: none; }
.lm-step.on { display: block; animation: lmIn .22s ease; }
@keyframes lmIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.lm-q {
    font-size: .95rem; font-weight: 700;
    margin-bottom: 1rem; line-height: 1.3; color: var(--lm-w);
}

.lm-opts { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.lm-opt {
    background: var(--lm-g); border: 1px solid #252525;
    padding: .65rem .9rem; cursor: pointer;
    display: flex; align-items: center; gap: .75rem;
    color: var(--lm-w); font-family: 'Space Grotesk', sans-serif; font-size: .83rem;
    text-align: left; width: 100%; transition: border-color .1s, background .1s;
}
.lm-opt:hover  { border-color: var(--lm-y); background: rgba(255,224,51,.04); }
.lm-opt.s      { border-color: var(--lm-y); background: rgba(255,224,51,.07); }
.lm-opt-icon   { font-size: 1rem; width: 1.4rem; text-align: center; flex-shrink: 0; }
.lm-opt-main   { font-weight: 600; font-size: .83rem; }
.lm-opt-sub    { font-size: .72rem; color: #555; margin-top: .05rem; }

/* Nav buttons */
.lm-nav { display: flex; gap: .5rem; }
.lm-back {
    background: transparent; border: 1px solid #252525; color: #444;
    padding: .6rem .85rem; cursor: pointer; font-size: .85rem; transition: .1s;
}
.lm-back--disabled { opacity: .15; pointer-events: none; }
.lm-back:hover { border-color: #444; color: var(--lm-w); }
.lm-next {
    flex: 1; background: var(--lm-y); color: var(--lm-bk); border: none;
    padding: .6rem 1rem; font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; opacity: .2; pointer-events: none; transition: opacity .15s, background .1s;
}
.lm-next.on { opacity: 1; pointer-events: all; }
.lm-next.on:hover { background: var(--lm-w); }

/* Result */
#lm-result { display: none; }
#lm-result.on { display: block; animation: lmIn .3s ease; }

.lm-result-intro { padding: 1rem 1.1rem .75rem; background: var(--lm-g); border-bottom: 1px solid #1a1a1a; }
.lm-ri-label    { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: #444; margin-bottom: .3rem; }
.lm-ri-sentence { font-size: .88rem; color: #999; line-height: 1.5; }
.lm-ri-sentence strong { color: var(--lm-w); font-weight: 600; }

.lm-nums {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: #1a1a1a; margin-bottom: 1px;
}
.lm-num      { background: var(--lm-g); padding: .9rem 1rem; }
.lm-num-big  { padding: 1.1rem 1rem; }
.lm-num-label { font-size: .68rem; color: #555; margin-bottom: .3rem; line-height: 1.3; }
.lm-num-val   { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; line-height: 1; }
.lm-num-big .lm-num-val { font-size: 2.4rem; }
.lm-y { color: var(--lm-y); }
.lm-p { color: var(--lm-pk); }
.lm-w { color: var(--lm-w); }
.lm-d { color: #3a3a3a; }
.lm-num-sub { font-size: .7rem; color: #444; margin-top: .2rem; }

.lm-nums-secondary { border-top: 1px solid #111; }
.lm-nums-secondary .lm-num-val { font-size: 1.4rem; color: #3a3a3a; }

/* Solution blur */
.lm-solution-wrap   { position: relative; }
.lm-solution-inner  { filter: blur(5px); pointer-events: none; user-select: none; transition: filter .45s ease; }
.lm-solution-inner.rev { filter: none; pointer-events: all; user-select: auto; }

.lm-solution  { padding: 1.1rem; background: var(--lm-g); border-top: 1px solid #1a1a1a; }
.lm-fix-tag   { display: inline-block; background: rgba(255,60,172,.1); border: 1px solid var(--lm-pk); color: var(--lm-pk); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .6rem; margin-bottom: .6rem; }
.lm-fix-txt   { font-size: .83rem; color: #bbb; line-height: 1.55; margin-bottom: .75rem; }
.lm-how       { background: var(--lm-bk); border: 1px solid #1e1e1e; padding: .85rem; }
.lm-how-label { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: #333; margin-bottom: .4rem; }
.lm-how-txt   { font-size: .78rem; color: #666; line-height: 1.7; }

/* Overlay + optin */
.lm-overlay {
    position: absolute; inset: 0;
    background: rgba(8,8,8,.7); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; transition: opacity .35s ease;
}
.lm-overlay.gone { opacity: 0; pointer-events: none; }

.lm-optin     { background: var(--lm-g); border: 1px solid #2a2a2a; border-top: 2px solid var(--lm-y); padding: 1.1rem; width: 100%; max-width: 380px; }
.lm-optin-hl  { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--lm-y); margin-bottom: .25rem; }
.lm-optin-sub { font-size: .75rem; color: #666; line-height: 1.5; margin-bottom: .75rem; }
.lm-optin-row { display: flex; gap: .35rem; margin-bottom: .5rem; }

.lm-email {
    flex: 1; background: var(--lm-bk); border: 1px solid #2a2a2a;
    color: var(--lm-w); padding: .65rem .75rem;
    font-family: 'Space Grotesk', sans-serif; font-size: .82rem; outline: none;
    transition: border-color .1s;
}
.lm-email:focus { border-color: var(--lm-y); }
.lm-email::placeholder { color: #2e2e2e; }
.lm-email.err { border-color: var(--lm-pk); }

.lm-submit {
    background: var(--lm-y); color: var(--lm-bk); border: none;
    padding: .65rem .9rem; font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer; white-space: nowrap; transition: background .1s;
    display: flex; align-items: center; gap: .4rem;
}
.lm-submit:hover    { background: var(--lm-w); }
.lm-submit:disabled { opacity: .5; cursor: not-allowed; }

/* GDPR checkbox */
.lm-gdpr { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; }
.lm-gdpr input[type="checkbox"] {
    flex-shrink: 0; margin-top: .1rem; cursor: pointer;
    accent-color: var(--lm-y); width: 14px; height: 14px;
}
.lm-gdpr label { font-size: .65rem; color: #555; line-height: 1.4; cursor: pointer; }
.lm-gdpr label a { color: #666; text-decoration: underline; }
.lm-gdpr label a:hover { color: var(--lm-w); }
.lm-gdpr.err label { color: var(--lm-pk); }

.lm-optin-note { font-size: .62rem; color: #333; margin-top: .4rem; }
.lm-confirmed  { display: none; font-size: .78rem; color: #888; line-height: 1.55; }
.lm-confirmed strong { color: var(--lm-y); }
.lm-error-msg  { font-size: .68rem; color: var(--lm-pk); margin-top: .35rem; display: none; }

/* Spinner */
.lm-spinner {
    display: none; width: 14px; height: 14px;
    border: 2px solid #333; border-top-color: var(--lm-bk);
    border-radius: 50%; animation: lmSpin .6s linear infinite;
}
@keyframes lmSpin { to { transform: rotate(360deg); } }

/* Honeypot */
.lm-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* Reset link */
.lm-reset {
    text-align: center; padding: .75rem; font-size: .62rem;
    color: #2e2e2e; cursor: pointer; letter-spacing: .05em;
    border-top: 1px solid #141414;
}
.lm-reset:hover { color: #666; }