.spo-wrap{margin:18px 0 24px;font-family:inherit;color:inherit}.spo-block{display:block}.spo-heading{font-size:17px;margin:24px 0 13px;padding-top:18px;border-top:1px solid rgba(0,0,0,.1)}.spo-heading:first-child{margin-top:0;border-top:0;padding-top:0}.spo-info{padding:12px 14px;background:rgba(0,0,0,.035);border-radius:6px;margin:10px 0}.spo-separator{border:0;border-top:1px solid rgba(0,0,0,.1);margin:18px 0}.spo-field{margin:0 0 19px}.spo-field-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:9px}.spo-field-head>div{min-width:0}.spo-field-head label{display:block;font-weight:700}.spo-field-head label b{color:#b42318}.spo-field-head small{display:block;margin-top:3px;color:inherit;opacity:.68}.spo-current-value{margin-left:auto;max-width:46%;text-align:right;white-space:normal;font-size:12px;color:#697887;font-weight:700}.spo-field>input[type=text],.spo-field>input[type=number],.spo-field>input[type=date],.spo-field>select,.spo-field>textarea{width:100%;min-height:42px;padding:9px 11px;border:1px solid rgba(0,0,0,.2);border-radius:5px;background:#fff;color:inherit;font:inherit}.spo-field>textarea{min-height:90px}.spo-options{display:grid;grid-template-columns:repeat(var(--spo-cols),minmax(0,1fr));gap:8px;width:100%}.spo-option{position:relative;min-width:0;display:block}.spo-option input{position:absolute;opacity:0;pointer-events:none}.spo-option>span{height:100%;min-height:52px;width:100%;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 10px;border:1px solid rgba(0,0,0,.22);border-radius:6px;background:#fff;text-align:center;cursor:pointer;transition:.15s ease;line-height:1.15}.spo-option input:checked+span{border-color:currentColor;box-shadow:0 0 0 1px currentColor inset}.spo-option em{font-style:normal;font-weight:700}.spo-option small{display:block;opacity:.7}.spo-option b{font-size:12px}.spo-type-image .spo-option>span{flex-direction:column;padding:7px}.spo-type-image img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}.spo-color-options{display:grid;grid-template-columns:repeat(var(--spo-cols),minmax(0,1fr));gap:13px 7px;width:100%;align-items:start}.spo-color-option{position:relative;min-width:0;text-align:center;cursor:pointer}.spo-color-option input{position:absolute;opacity:0;pointer-events:none}.spo-color-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:5px;min-width:0;min-height:74px;text-align:center}.spo-color-swatch{position:relative;display:block;width:min(100%,40px);aspect-ratio:1/1;background:var(--c);border:1px solid rgba(0,0,0,.18);box-shadow:0 0 0 1px rgba(255,255,255,.75) inset}.spo-swatch-circle .spo-color-swatch{border-radius:50%}.spo-swatch-rectangle .spo-color-swatch{border-radius:1px}.spo-color-swatch u{display:none;position:absolute;right:-7px;top:-7px;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;text-decoration:none;font-size:12px;font-style:normal;font-weight:800;background:#111;color:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 1px 2px rgba(0,0,0,.18)}.spo-color-option input:checked+.spo-color-content .spo-color-swatch{outline:2px solid currentColor;outline-offset:2px}.spo-color-option input:checked+.spo-color-content .spo-color-swatch u{display:flex}.spo-hide-check .spo-color-swatch u{display:none!important}.spo-color-content em{display:block;width:100%;font-style:normal;font-size:10px;line-height:1.1;text-align:center;overflow-wrap:anywhere;min-height:22px}.spo-hide-color-name .spo-color-content em{display:none}.spo-color-content b{font-size:10px}.spo-file{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:22px;border:2px dashed rgba(0,0,0,.25);border-radius:7px;background:rgba(0,0,0,.02);text-align:center;cursor:pointer}.spo-file input{max-width:100%}.spo-file span{font-weight:700}.spo-file small{opacity:.7}.spo-file-name{font-size:12px;margin-top:6px;color:#697887}.spo-field-warning{display:none;margin-top:6px;font-size:11px;color:#a94442}.spo-field.is-invalid .spo-field-warning{display:block}.spo-price-summary{margin-top:20px;background:#171717;color:#fff;padding:22px 24px;border-radius:10px}.spo-price-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-size:18px;line-height:1.2;margin-bottom:14px}.spo-price-row span{font-weight:700;color:#ededed}.spo-price-row strong{font-size:24px;font-weight:800;color:#fff}.spo-total-row{border-top:1px solid rgba(255,255,255,.22);padding-top:14px;margin-top:2px;margin-bottom:0}.spo-total-row span{font-size:22px}.spo-total-row strong{font-size:34px}.spo-field[hidden]{display:none!important}.spo-edit-cart-item{font-size:12px;text-decoration:underline}
@media(max-width:1024px){.spo-options{grid-template-columns:repeat(var(--spo-cols-tablet),minmax(0,1fr))}.spo-color-options{grid-template-columns:repeat(var(--spo-cols-tablet),minmax(0,1fr));gap:11px 4px}.spo-color-swatch{width:min(100%,34px)}.spo-color-content em{font-size:9px}}
@media(max-width:767px){.spo-options{grid-template-columns:repeat(var(--spo-cols-mobile),minmax(0,1fr))}.spo-type-yesno .spo-options{grid-template-columns:repeat(2,minmax(0,1fr))}.spo-color-options{grid-template-columns:repeat(var(--spo-cols-mobile),minmax(0,1fr));gap:10px 2px}.spo-color-swatch{width:min(100%,28px)}.spo-color-content em{font-size:8px}.spo-current-value{max-width:45%}.spo-price-row{font-size:16px}.spo-price-row strong{font-size:21px}.spo-total-row span{font-size:20px}.spo-total-row strong{font-size:28px}}

/* RC21 — hoja final consolidada, sin reglas contradictorias */

/* Contenedor real */
.spo-wrap{
    width:100%!important;
    max-width:477.05px!important;
    margin:18px auto 22px!important;
    color:#202020!important;
    font-family:inherit!important;
    font-size:14px!important;
    line-height:1.3!important;
}

.spo-block,
.spo-field,
.spo-price-summary,
.spo-field-head,
.spo-options,
.spo-color-options{
    width:100%!important;
    max-width:477.05px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
}

/* Estructura vertical definitiva */
.spo-block{
    display:block!important;
}

.spo-field{
    display:grid!important;
    grid-template-rows:auto auto!important;
    row-gap:3px!important;
    margin:0!important;
    padding:0!important;
}

.spo-block > .spo-field + .spo-field{
    margin-top:12px!important;
}

.spo-field-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
}

.spo-field-head>div{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
}

.spo-field-head label{
    display:block!important;
    margin:0!important;
    padding:0!important;
    color:#202020!important;
    font-size:15px!important;
    font-weight:700!important;
    line-height:1.05!important;
}

.spo-field-head label b{
    color:#e1251b!important;
}

.spo-field-head small{
    display:block!important;
    margin:2px 0 0!important;
    padding:0!important;
    color:#666!important;
    font-size:12px!important;
    line-height:1.1!important;
}

.spo-current-value{
    margin:0 0 0 auto!important;
    padding:0!important;
    max-width:42%!important;
    color:#555!important;
    font-size:11px!important;
    font-weight:600!important;
    line-height:1.05!important;
    text-align:right!important;
}

/* Las opciones empiezan inmediatamente después del título */
.spo-field-head + .spo-options,
.spo-field-head + .spo-color-options,
.spo-field-head + input,
.spo-field-head + select,
.spo-field-head + textarea,
.spo-field-head + .spo-file{
    margin-top:0!important;
    padding-top:0!important;
}

.spo-options,
.spo-color-options{
    margin-top:0!important;
    padding-top:0!important;
}

/* Botones */
.spo-option{
    position:relative!important;
    display:block!important;
    min-width:0!important;
}

.spo-option input{
    position:absolute!important;
    opacity:0!important;
    pointer-events:none!important;
}

.spo-option>span{
    position:relative!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:44.39px!important;
    height:44.39px!important;
    padding:4px 6px!important;
    border:1px solid #9f9f9f!important;
    border-radius:5px!important;
    background:#fff!important;
    color:#242424!important;
    text-align:center!important;
    cursor:pointer!important;
    box-sizing:border-box!important;
}

.spo-option em{
    display:block!important;
    font-style:normal!important;
    font-size:13px!important;
    font-weight:500!important;
    line-height:1.05!important;
}

.spo-option small,
.spo-option b{
    font-size:11px!important;
    line-height:1.05!important;
}

.spo-option input:checked+span{
    border-color:#12bfb1!important;
    box-shadow:0 0 0 1px #12bfb1 inset!important;
}

.spo-option input:checked+span:after{
    content:"✓"!important;
    position:absolute!important;
    top:3px!important;
    right:3px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:16px!important;
    height:16px!important;
    border-radius:50%!important;
    background:#12bfb1!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1!important;
    z-index:2!important;
}

/* Geometría por cantidad — aplicada a todos los tipos visuales */
.spo-type-buttons.spo-option-count-1 .spo-options,
.spo-type-radio.spo-option-count-1 .spo-options,
.spo-type-yesno.spo-option-count-1 .spo-options,
.spo-type-image.spo-option-count-1 .spo-options{
    grid-template-columns:minmax(0,477.05px)!important;
    gap:0!important;
}

.spo-type-buttons.spo-option-count-2 .spo-options,
.spo-type-radio.spo-option-count-2 .spo-options,
.spo-type-yesno.spo-option-count-2 .spo-options,
.spo-type-image.spo-option-count-2 .spo-options{
    grid-template-columns:repeat(2,minmax(0,233.525px))!important;
    column-gap:10px!important;
    row-gap:4px!important;
}

.spo-type-buttons.spo-option-count-3 .spo-options,
.spo-type-radio.spo-option-count-3 .spo-options,
.spo-type-yesno.spo-option-count-3 .spo-options,
.spo-type-image.spo-option-count-3 .spo-options{
    grid-template-columns:repeat(3,minmax(0,152.35px))!important;
    column-gap:10px!important;
    row-gap:4px!important;
}

.spo-type-buttons.spo-option-count-5 .spo-options,
.spo-type-radio.spo-option-count-5 .spo-options,
.spo-type-yesno.spo-option-count-5 .spo-options,
.spo-type-image.spo-option-count-5 .spo-options{
    grid-template-columns:repeat(5,minmax(0,87.41px))!important;
    column-gap:10px!important;
    row-gap:4px!important;
}

.spo-type-buttons.spo-option-count-6 .spo-options,
.spo-type-radio.spo-option-count-6 .spo-options,
.spo-type-yesno.spo-option-count-6 .spo-options,
.spo-type-image.spo-option-count-6 .spo-options{
    grid-template-columns:repeat(6,minmax(0,50px))!important;
    justify-content:space-between!important;
    column-gap:0!important;
    row-gap:4px!important;
}

.spo-type-buttons.spo-option-count-16 .spo-options,
.spo-type-radio.spo-option-count-16 .spo-options,
.spo-type-yesno.spo-option-count-16 .spo-options,
.spo-type-image.spo-option-count-16 .spo-options{
    grid-template-columns:repeat(8,minmax(0,50px))!important;
    justify-content:center!important;
    column-gap:11.0071px!important;
    row-gap:5px!important;
}

.spo-type-buttons.spo-option-count-27 .spo-options,
.spo-type-radio.spo-option-count-27 .spo-options,
.spo-type-yesno.spo-option-count-27 .spo-options,
.spo-type-image.spo-option-count-27 .spo-options{
    grid-template-columns:repeat(9,minmax(0,44.1167px))!important;
    column-gap:10px!important;
    row-gap:4px!important;
}

/* Colores */
.spo-color-options{
    display:grid!important;
    align-items:start!important;
}

.spo-type-color.spo-option-count-6 .spo-color-options{
    grid-template-columns:repeat(6,50px)!important;
    justify-content:space-between!important;
    column-gap:0!important;
    row-gap:5px!important;
}

.spo-type-color.spo-option-count-16 .spo-color-options{
    grid-template-columns:repeat(8,50px)!important;
    justify-content:center!important;
    column-gap:11.0071px!important;
    row-gap:5px!important;
}

.spo-color-option{
    position:relative!important;
    min-width:0!important;
    text-align:center!important;
}

.spo-color-content{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:2px!important;
    min-height:54px!important;
}

.spo-color-swatch{
    position:relative!important;
    overflow:hidden!important;
    display:block!important;
    width:50px!important;
    height:50px!important;
    max-width:50px!important;
    aspect-ratio:1/1!important;
    background:var(--c)!important;
    border:1px solid #cfcfcf!important;
    box-sizing:border-box!important;
}

.spo-swatch-circle .spo-color-swatch{
    border-radius:50%!important;
}

.spo-swatch-rectangle .spo-color-swatch{
    border-radius:0!important;
}

.spo-color-swatch u{
    display:none!important;
    position:absolute!important;
    top:3px!important;
    right:3px!important;
    align-items:center!important;
    justify-content:center!important;
    width:15px!important;
    height:15px!important;
    border-radius:50%!important;
    background:#12bfb1!important;
    color:#fff!important;
    border:0!important;
    box-shadow:none!important;
    font-size:9px!important;
    font-style:normal!important;
    font-weight:800!important;
    line-height:1!important;
    text-decoration:none!important;
    z-index:2!important;
}

.spo-color-option input:checked+.spo-color-content .spo-color-swatch{
    outline:1px solid #12bfb1!important;
    outline-offset:1px!important;
}

.spo-color-option input:checked+.spo-color-content .spo-color-swatch u{
    display:flex!important;
}

.spo-hide-check .spo-color-swatch u{
    display:none!important;
}

.spo-color-content em{
    display:block!important;
    width:100%!important;
    min-height:14px!important;
    margin:0!important;
    color:#333!important;
    font-size:11px!important;
    font-style:normal!important;
    line-height:1.05!important;
    text-align:center!important;
}

.spo-color-content b{
    font-size:10px!important;
}

/* Campos */
.spo-field>input[type=text],
.spo-field>input[type=number],
.spo-field>input[type=date],
.spo-field>select,
.spo-field>textarea{
    width:100%!important;
    min-height:40px!important;
    margin:0!important;
    padding:8px 10px!important;
    border:1px solid #d3d3d3!important;
    border-radius:3px!important;
    background:#fff!important;
    color:#222!important;
    font:inherit!important;
    box-sizing:border-box!important;
}

.spo-field>textarea{
    min-height:132px!important;
}

.spo-field-warning{
    display:none!important;
    margin-top:4px!important;
    font-size:11px!important;
    color:#a94442!important;
}

.spo-field.is-invalid .spo-field-warning{
    display:block!important;
}

/* Precio */
.spo-price-summary{
    margin-top:16px!important;
    padding:16px 18px!important;
    border-radius:4px!important;
    background:#181818!important;
    color:#fff!important;
}

.spo-price-row{
    display:flex!important;
    align-items:baseline!important;
    justify-content:space-between!important;
    gap:16px!important;
    margin-bottom:10px!important;
    font-size:13px!important;
    line-height:1.2!important;
}

.spo-price-row strong{
    font-size:17px!important;
}

.spo-total-row{
    margin:2px 0 0!important;
    padding-top:12px!important;
    border-top:1px solid rgba(255,255,255,.28)!important;
}

.spo-total-row span{
    font-size:15px!important;
}

.spo-total-row strong{
    font-size:22px!important;
}

/* Responsive: mismas columnas, escaladas */
@media(max-width:540px){
    .spo-wrap,
    .spo-block,
    .spo-field,
    .spo-price-summary,
    .spo-field-head,
    .spo-options,
    .spo-color-options{
        max-width:100%!important;
    }

    .spo-block > .spo-field + .spo-field{
        margin-top:10px!important;
    }

    .spo-field{
        row-gap:2px!important;
    }

    .spo-option>span{
        min-height:clamp(34px,9.3vw,44.39px)!important;
        height:clamp(34px,9.3vw,44.39px)!important;
        padding:3px 4px!important;
    }

    .spo-option em{
        font-size:clamp(9px,2.5vw,13px)!important;
    }

    .spo-type-buttons.spo-option-count-1 .spo-options,
    .spo-type-radio.spo-option-count-1 .spo-options,
    .spo-type-yesno.spo-option-count-1 .spo-options,
    .spo-type-image.spo-option-count-1 .spo-options{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .spo-type-buttons.spo-option-count-2 .spo-options,
    .spo-type-radio.spo-option-count-2 .spo-options,
    .spo-type-yesno.spo-option-count-2 .spo-options,
    .spo-type-image.spo-option-count-2 .spo-options{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .spo-type-buttons.spo-option-count-3 .spo-options,
    .spo-type-radio.spo-option-count-3 .spo-options,
    .spo-type-yesno.spo-option-count-3 .spo-options,
    .spo-type-image.spo-option-count-3 .spo-options{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }

    .spo-type-buttons.spo-option-count-5 .spo-options,
    .spo-type-radio.spo-option-count-5 .spo-options,
    .spo-type-yesno.spo-option-count-5 .spo-options,
    .spo-type-image.spo-option-count-5 .spo-options{
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
    }

    .spo-type-buttons.spo-option-count-6 .spo-options,
    .spo-type-radio.spo-option-count-6 .spo-options,
    .spo-type-yesno.spo-option-count-6 .spo-options,
    .spo-type-image.spo-option-count-6 .spo-options{
        grid-template-columns:repeat(6,minmax(0,1fr))!important;
        column-gap:clamp(4px,2vw,10px)!important;
    }

    .spo-type-buttons.spo-option-count-16 .spo-options,
    .spo-type-radio.spo-option-count-16 .spo-options,
    .spo-type-yesno.spo-option-count-16 .spo-options,
    .spo-type-image.spo-option-count-16 .spo-options{
        grid-template-columns:repeat(8,minmax(0,1fr))!important;
        column-gap:clamp(2px,1.4vw,7px)!important;
    }

    .spo-type-buttons.spo-option-count-27 .spo-options,
    .spo-type-radio.spo-option-count-27 .spo-options,
    .spo-type-yesno.spo-option-count-27 .spo-options,
    .spo-type-image.spo-option-count-27 .spo-options{
        grid-template-columns:repeat(9,minmax(0,1fr))!important;
    }

    .spo-type-color.spo-option-count-6 .spo-color-options{
        grid-template-columns:repeat(6,minmax(0,1fr))!important;
        column-gap:clamp(4px,2vw,10px)!important;
    }

    .spo-type-color.spo-option-count-16 .spo-color-options{
        grid-template-columns:repeat(8,minmax(0,1fr))!important;
        column-gap:clamp(2px,1.4vw,7px)!important;
    }

    .spo-type-color.spo-option-count-6 .spo-color-swatch,
    .spo-type-color.spo-option-count-16 .spo-color-swatch{
        width:100%!important;
        height:auto!important;
        max-width:50px!important;
        aspect-ratio:1/1!important;
    }

    .spo-color-content em{
        font-size:clamp(8px,2.4vw,11px)!important;
    }
}
