*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{color:#1c1b19;background:#f6f4f0;font-family:Helvetica Neue,Arial,sans-serif}.app{height:100vh;display:flex}.viewer{background:linear-gradient(#efece6,#e3dfd7);flex:1;position:relative}.marca{letter-spacing:4px;font-size:22px;font-weight:700;position:absolute;top:24px;left:28px}.marca span{letter-spacing:3px;color:#8a857c;font-size:10px;font-weight:400;display:block}.panel{background:#fff;width:380px;padding:32px 28px;overflow-y:auto;box-shadow:-8px 0 30px #0000000f}h1{font-size:24px;font-weight:600}.sub{color:#8a857c;margin:6px 0 24px;font-size:13px}section{margin-bottom:22px}h2{text-transform:uppercase;letter-spacing:2px;color:#6d675e;margin-bottom:10px;font-size:11px;font-weight:600}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{cursor:pointer;background:#fff;border:1px solid #d8d3ca;border-radius:999px;padding:8px 14px;font-size:13px;transition:all .15s}.chip:hover{border-color:#1c1b19}.chip.on{color:#fff;background:#1c1b19;border-color:#1c1b19}.swatches{gap:10px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;outline:1px solid #d8d3ca;width:38px;height:38px;transition:all .15s}.swatch.on{outline-offset:3px;outline:2px solid #1c1b19}.label{color:#8a857c;margin-top:8px;font-size:12px}.precio{border-top:1px solid #eceae5;justify-content:space-between;align-items:baseline;margin-top:8px;padding:18px 0;display:flex}.precio span{color:#8a857c;font-size:12px}.precio strong{font-size:22px}.cta{color:#fff;cursor:pointer;background:#25d366;border:none;border-radius:10px;width:100%;padding:15px;font-size:15px;font-weight:600;transition:background .15s}.cta:hover{background:#1fb457}.nota{color:#a39d92;text-align:center;margin-top:12px;font-size:11px}@media (width<=820px){.app{flex-direction:column}.viewer{flex:none;height:45vh}.panel{flex:1;width:100%}}