/* Widget del test de SweetSpot para tiendas (v1). Colores: --brand y --accent. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:transparent}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#111827;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
a{color:inherit}

.ssw{max-width:640px;margin:0 auto;padding:4px}
.ssw-card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:20px;box-shadow:0 1px 3px rgba(17,24,39,.06)}
@media (min-width:520px){.ssw-card{padding:28px}}

.ssw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.ssw-logo{max-height:32px;max-width:150px;object-fit:contain}
.ssw-shop{font-weight:700;font-size:15px}
.ssw-tag{font-size:12px;font-weight:600;color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,#fff);padding:4px 10px;border-radius:999px;white-space:nowrap}

.ssw-h1{font-size:24px;line-height:1.2;font-weight:800;margin:0 0 8px;letter-spacing:-.01em}
.ssw-h2{font-size:20px;line-height:1.25;font-weight:800;margin:0 0 4px;outline:none}
.ssw-sub{color:#4b5563;margin:0 0 18px;font-size:15px}
.ssw-points{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.ssw-points li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#374151}
.ssw-points li::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--accent)}

.ssw-progress{height:6px;background:#f3f4f6;border-radius:999px;overflow:hidden;margin-bottom:18px}
.ssw-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:999px;transition:width .3s ease}
.ssw-step{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}

.ssw-options{display:grid;gap:10px;margin-top:16px}
.ssw-options.cols{grid-template-columns:1fr 1fr}
.ssw-opt{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid #e5e7eb;border-radius:14px;padding:14px 16px;transition:border-color .15s,background .15s,transform .1s;color:#111827}
.ssw-opt:hover{border-color:color-mix(in srgb,var(--brand) 55%,#fff)}
.ssw-opt:active{transform:scale(.99)}
.ssw-opt[aria-pressed="true"]{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,#fff)}
.ssw-opt b{display:block;font-weight:700;font-size:15px}
.ssw-opt small{display:block;color:#6b7280;font-size:13px;margin-top:2px}
.ssw-opt:focus-visible,.ssw-btn:focus-visible,.ssw-link:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,#fff);outline-offset:2px}

.ssw-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.ssw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 22px;font-weight:700;font-size:16px;color:#fff;background:linear-gradient(90deg,var(--brand),var(--accent));text-decoration:none;min-height:48px}
.ssw-btn[disabled]{opacity:.5;cursor:not-allowed}
.ssw-btn.full{width:100%}
.ssw-btn.ghost{background:#fff;color:#111827;border:1.5px solid #e5e7eb}
.ssw-link{background:none;border:0;color:#4b5563;font-weight:600;padding:10px 4px;text-decoration:underline;text-underline-offset:3px}

.ssw-field{display:block;margin-top:16px}
.ssw-field span{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.ssw-input{width:100%;border:1.5px solid #d1d5db;border-radius:12px;padding:13px 14px;font-size:16px}
.ssw-input:focus{outline:none;border-color:var(--brand)}
.ssw-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13px;color:#4b5563}
.ssw-check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--brand)}
.ssw-error{margin-top:12px;padding:10px 12px;border-radius:10px;background:#fef2f2;color:#991b1b;font-size:14px}

.ssw-loading{text-align:center;padding:48px 8px}
.ssw-spin{width:36px;height:36px;border-radius:50%;border:4px solid #f3f4f6;border-top-color:var(--brand);margin:0 auto 14px;animation:ssw-spin .8s linear infinite}
@keyframes ssw-spin{to{transform:rotate(360deg)}}

.ssw-results{display:grid;gap:12px;margin-top:16px}
.ssw-res{display:grid;grid-template-columns:76px 1fr;gap:14px;border:1.5px solid #e5e7eb;border-radius:16px;padding:12px;align-items:start}
.ssw-res.top{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,#fff)}
.ssw-img{width:76px;height:76px;border-radius:12px;background:#f3f4f6;object-fit:contain}
.ssw-rank{font-size:12px;font-weight:700;color:#6b7280}
.ssw-res.top .ssw-rank{color:var(--brand)}
.ssw-name{font-weight:800;font-size:16px;line-height:1.25;margin:2px 0 6px}
.ssw-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.ssw-score{font-weight:700;color:#fff;background:var(--brand);border-radius:999px;padding:2px 9px}
.ssw-price{font-weight:700;color:#111827}
.ssw-chip{color:#4b5563;background:#f3f4f6;border-radius:999px;padding:2px 9px;display:inline-block}
.ssw-chip::first-letter{text-transform:uppercase}
.ssw-noimg{background:#f3f4f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5'%3E%3Cellipse cx='12' cy='8' rx='6' ry='7'/%3E%3Cpath d='M12 15v7'/%3E%3C/svg%3E") center/40% no-repeat}
.ssw-reason{font-size:13px;color:#4b5563;margin:8px 0 0}
.ssw-res .ssw-btn{grid-column:1/-1;padding:11px 16px;font-size:15px;min-height:44px}
@media (min-width:520px){.ssw-res{grid-template-columns:96px 1fr}.ssw-img{width:96px;height:96px}}

.ssw-foot{display:flex;justify-content:center;margin-top:14px;font-size:12px;color:#9ca3af}
.ssw-foot a{color:#6b7280;font-weight:600;text-decoration:none}
.ssw-foot a:hover{text-decoration:underline}
.ssw-demo{margin-bottom:14px;padding:10px 12px;border-radius:12px;background:#fffbeb;color:#92400e;font-size:13px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}