/* RVM Trim — tienda: estilo consumidor, claro y limpio */
:root{
  --bg:#f7f6f2; --card:#ffffff; --line:#e2ded4; --ink:#1d2733; --dim:#68727e;
  --acc:#1f7ae8; --acc2:#155bb4; --ok:#1d7a4f; --r:14px;
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg); color:var(--ink);
  font:16px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif}
a{color:var(--acc); text-decoration:none}

header{background:#ffffffee; backdrop-filter:blur(8px); position:sticky; top:0; z-index:30;
  border-bottom:1px solid var(--line)}
.hrow{max-width:1140px; margin:0 auto; padding:14px 22px; display:flex;
  align-items:center; gap:14px; flex-wrap:wrap}
.logo{font-size:19px; font-weight:800; letter-spacing:.3px; color:var(--ink)}
.logo span{color:var(--acc)}
.tag{font-size:12px; color:var(--dim)}
.spacer{flex:1}
.btn{display:inline-block; background:var(--acc); color:#fff; border:0; cursor:pointer;
  padding:11px 20px; border-radius:10px; font-size:15px; font-weight:700}
.btn:hover{background:var(--acc2)}
.btn.sec{background:#fff; color:var(--ink); border:1.5px solid var(--line)}
.btn.sec:hover{border-color:var(--acc); color:var(--acc); background:#fff}
#cartBtn{position:relative}
#cartN{position:absolute; top:-7px; right:-7px; background:#c0392b; color:#fff;
  font-size:11px; font-weight:800; border-radius:10px; padding:1px 6px; display:none}

main{max-width:1140px; margin:0 auto; padding:26px 22px 90px}
.hero{display:flex; gap:34px; align-items:center; padding:26px 0 34px; flex-wrap:wrap}
.hero .txt{flex:1; min-width:280px}
.hero h1{font-size:clamp(28px, 4.6vw, 44px); line-height:1.12; letter-spacing:-.5px}
.hero h1 em{color:var(--acc); font-style:normal}
.hero p{color:var(--dim); margin:14px 0 22px; max-width:520px; font-size:17px}
.hero .vis{flex:1.1; min-width:300px; height:340px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; position:relative}
.hero .vis canvas{display:block}
.visHint{position:absolute; bottom:10px; left:0; right:0; text-align:center;
  font-size:12px; color:var(--dim); pointer-events:none}

h2.secT{font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--dim);
  margin:26px 0 16px}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; display:flex; flex-direction:column; gap:8px; transition:box-shadow .15s, transform .15s}
.card:hover{box-shadow:0 12px 34px rgba(29,39,51,.10); transform:translateY(-2px)}
.card .mini{background:#fbfaf7; border:1px solid var(--line); border-radius:10px; padding:10px}
.card .mini svg{width:100%; height:auto; display:block}
.card b{font-size:17px}
.card p{font-size:13.5px; color:var(--dim); flex:1}
.card .fila{display:flex; align-items:center; gap:10px}
.card .desde{font-size:13px; color:var(--dim)}
.card .desde b{color:var(--ink); font-size:15px}

/* configurador */
.prod{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start}
.vis3d{flex:1.3; min-width:320px; height:440px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; position:relative}
.conf{flex:1; min-width:300px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:22px}
.conf h1{font-size:26px; margin-bottom:4px}
.conf .sub{color:var(--dim); font-size:14px; margin-bottom:18px}
.campo{margin-bottom:16px}
.campo label{display:block; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--dim); margin-bottom:7px; font-weight:700}
select, input[type=number]{width:100%; padding:11px 12px; border:1.5px solid var(--line);
  border-radius:10px; font-size:15px; background:#fff; color:var(--ink)}
select:focus, input:focus{outline:none; border-color:var(--acc)}
.swatches{display:flex; gap:8px; flex-wrap:wrap}
.sw{width:34px; height:34px; border-radius:50%; cursor:pointer; border:2.5px solid #fff;
  outline:1.5px solid var(--line)}
.sw.on{outline:3px solid var(--acc)}
.precio{display:flex; align-items:baseline; gap:10px; margin:18px 0 6px}
.precio b{font-size:30px}
.precio span{font-size:12.5px; color:var(--dim)}
.nota{font-size:12.5px; color:var(--dim); margin-bottom:16px}

/* carrito / cotización */
#drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px, 94vw); z-index:60;
  background:#fff; border-left:1px solid var(--line); box-shadow:-18px 0 50px rgba(0,0,0,.14);
  transform:translateX(105%); transition:transform .22s; display:flex; flex-direction:column}
#drawer.on{transform:none}
#drawer .cab{display:flex; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line)}
#drawer .cab b{font-size:18px; flex:1}
#drawer .cab button{background:none; border:0; font-size:20px; cursor:pointer; color:var(--dim)}
#items{flex:1; overflow-y:auto; padding:12px 20px}
.item{display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line)}
.item .sw2{width:22px; height:22px; border-radius:50%; outline:1px solid var(--line); flex-shrink:0}
.item .inf{flex:1; font-size:14px}
.item .inf small{display:block; color:var(--dim)}
.item .del{background:none; border:0; cursor:pointer; color:#c0392b; font-size:16px}
#drawer .pie{padding:16px 20px 22px; border-top:1px solid var(--line)}
#tot{display:flex; justify-content:space-between; font-size:17px; margin-bottom:12px}
#drawer .pie .btn{width:100%; text-align:center}
.aviso-est{font-size:12px; color:var(--dim); margin-top:10px; line-height:1.5}

footer{border-top:1px solid var(--line); background:#fff}
footer .frow{max-width:1140px; margin:0 auto; padding:26px 22px; font-size:13.5px;
  color:var(--dim); display:flex; gap:18px; flex-wrap:wrap; align-items:center}