*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f5f5f5;color:#151515}header{height:70px;background:#050505;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:5}.logo{display:flex;gap:10px;align-items:baseline}.logo b{font-size:28px}.logo span{font-size:11px;letter-spacing:3px}nav{display:flex;gap:24px}nav a{color:#fff;text-decoration:none;font-size:14px}.hero{background:#090909;color:#fff;padding:80px 5%;min-height:390px;display:flex;align-items:center}.hero>div{max-width:800px}.hero small,.head small{letter-spacing:3px;font-weight:bold;color:#888}.hero h1{font-size:58px;margin:15px 0}.hero p{color:#bbb}.btn{display:inline-block;border:0;background:#111;color:#fff;padding:13px 21px;border-radius:4px;text-decoration:none;font-weight:bold;cursor:pointer;margin-top:12px}.light{background:#fff;color:#111}main{width:min(1200px,90%);margin:auto}.head{display:flex;justify-content:space-between;align-items:end;padding:60px 0 25px}.head h2,.section h2,.dark h2{font-size:36px;margin:10px 0}.controls{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;margin-bottom:25px}.controls input,.controls select{height:45px;border:1px solid #ddd;background:#fff;border-radius:4px;padding:0 12px}.layout{display:grid;grid-template-columns:220px 1fr;gap:25px;margin-bottom:70px}.layout aside{background:#fff;padding:20px;border:1px solid #e6e6e6;border-radius:7px;height:max-content}.cat{display:block;width:100%;border:0;background:none;text-align:left;padding:8px 2px;cursor:pointer}.cat.active,.cat:hover{font-weight:bold}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.card{background:#fff;border:1px solid #e6e6e6;border-radius:7px;overflow:hidden;cursor:pointer}.pic{aspect-ratio:1;background:#eee;display:flex;align-items:center;justify-content:center;color:#888;font-size:12px}.pic img{width:100%;height:100%;object-fit:cover}.meta{padding:12px}.meta small{color:#777}.meta h3{font-size:15px;margin:6px 0}.section{padding:75px 5%;max-width:1200px;margin:auto}.section p,.dark p{color:#666}.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:25px}.invbox{background:#fff;border:1px solid #ddd;border-radius:10px;overflow:hidden;min-width:0}.model-photo{aspect-ratio:1.15;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid #eee}.model-photo img{width:100%;height:100%;object-fit:contain}.model-info{padding:18px}.model-info h3{margin:0 0 14px;font-size:19px}.model-variants{display:grid;gap:8px}.stock-line{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;border-bottom:1px solid #eee;padding-bottom:7px}.stock-line:last-child{border-bottom:0;padding-bottom:0}.dark{background:#111;color:#fff;padding:75px 5%}.dark p{color:#bbb}footer{background:#050505;color:#999;text-align:center;padding:30px}@media(max-width:900px){.controls{grid-template-columns:1fr 1fr}.grid{grid-template-columns:repeat(3,1fr)}.boxes{grid-template-columns:1fr 1fr}}@media(max-width:600px){nav a:not(:last-child){display:none}.hero h1{font-size:43px}.controls,.grid,.boxes{grid-template-columns:1fr}.layout{grid-template-columns:1fr}}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:50;padding:5%;overflow:auto}.modal.open{display:block}.modal-box{background:#fff;max-width:1050px;margin:4vh auto;padding:28px;border-radius:10px;position:relative}.close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:32px;cursor:pointer}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.detail-image{background:#eee;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.detail-image img{width:100%;height:100%;object-fit:contain}.variants{display:grid;gap:10px;margin:15px 0}.variant{border:1px solid #ddd;border-radius:6px;padding:13px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.variant strong{font-size:14px}.available{font-weight:bold}.unavailable{color:#999}.priority{border-left:3px solid #111}.muted{color:#666}@media(max-width:700px){.detail-grid{grid-template-columns:1fr}}

.available{color:#187a3d;font-weight:700}.unavailable{color:#9a2222;font-weight:700}.priority{border-left:3px solid #111}

.detail-label{font-size:12px;letter-spacing:3px;font-weight:700;color:#777;margin-bottom:8px}.meta small{display:block;line-height:1.45}.card:hover{box-shadow:0 3px 12px rgba(0,0,0,.08)}
body.modal-open{overflow:hidden}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:50;padding:24px;overflow:auto}
.modal.open{display:flex;align-items:center;justify-content:center}
.modal-box{background:#fff;width:min(1120px,96vw);max-height:92vh;margin:0;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.close{position:absolute;right:14px;top:10px;border:0;background:#fff;color:#111;font-size:30px;line-height:1;width:40px;height:40px;border-radius:50%;cursor:pointer;z-index:3}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);min-height:600px}
.detail-image{background:#f2f2f2;display:flex;align-items:center;justify-content:center;min-height:0;padding:24px;overflow:hidden}
.detail-image img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain}
.detail-panel{padding:48px 34px 34px;overflow:auto;max-height:92vh}
.selector-group{margin:20px 0 0}.selector-group label{display:block;font-weight:700;margin-bottom:7px}.selector-group select{width:100%;height:48px;border:1px solid #cfcfcf;border-radius:7px;background:#fff;padding:0 12px;font-size:15px}
.selection-status{margin-top:16px;padding:13px 14px;border-radius:8px;line-height:1.45;font-size:14px}.selection-status.ok{background:#edf8f0;color:#176b35}.selection-status.warn{background:#fff4e8;color:#8a4b08}.selection-status.muted{background:#f4f4f4;color:#666}
.small-note{font-size:13px;margin-top:14px}.detail-panel .btn{width:100%;margin-top:16px;text-align:center}
@media(max-width:800px){.modal{padding:10px}.modal-box{max-height:96vh}.detail-grid{grid-template-columns:1fr;min-height:0}.detail-image{height:42vh;padding:12px}.detail-image img{max-height:40vh}.detail-panel{max-height:none;padding:36px 20px 22px}.close{right:8px;top:7px}}

/* v14: ficha de diseño vertical, con selectores debajo de la imagen */
.modal{padding:24px}
.modal.open{display:flex;align-items:center;justify-content:center}
.modal-box{width:min(900px,94vw);max-height:92vh;overflow:auto;background:#fff;border-radius:12px}
.detail-stack{display:flex;flex-direction:column}
.detail-image{background:#f2f2f2;width:100%;height:min(58vh,620px);padding:18px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.detail-image img{display:block;width:100%;height:100%;object-fit:contain}
.detail-panel{padding:26px 34px 30px;max-height:none;overflow:visible}
.detail-panel h2{display:none}
.selector-group{margin-top:18px}
.selector-group label{display:block;font-weight:700;margin-bottom:7px}
.selector-group select{width:100%;height:46px;border:1px solid #ccc;border-radius:7px;background:#fff;padding:0 12px;font-size:15px}
.selection-status{margin-top:16px;padding:13px 14px;border-radius:8px;line-height:1.5;font-size:14px}
.detail-panel .btn{width:100%;margin-top:16px;text-align:center}
@media(max-width:700px){.modal{padding:8px}.modal-box{max-height:96vh;width:96vw}.detail-image{height:42vh;padding:10px}.detail-panel{padding:22px 18px 24px}}

/* v16: clic robusto en tarjetas */
.card{cursor:pointer;user-select:none}.card:focus{outline:2px solid #111;outline-offset:2px}


/* v17: identidad visual y ajustes de ficha */
.brand{display:flex;align-items:center;height:58px;width:155px;overflow:hidden;text-decoration:none}
.brand img{display:block;width:155px;height:58px;object-fit:cover;object-position:center center}
.catalog-instruction{margin:-6px 0 18px;font-size:14px;color:#555;font-weight:600}
.detail-panel .btn{background:#25D366;color:#fff}
.detail-panel .btn:hover{background:#20bd5a}
@media(max-width:600px){.brand{width:120px;height:54px}.brand img{width:120px;height:54px}.catalog-instruction{margin-top:-2px}}


/* v19: formulario de mayoreo, WhatsApp y logo completo */
.brand{width:132px;height:48px;overflow:visible;flex:0 0 auto}
.brand img{width:132px;height:48px;object-fit:contain;object-position:center}
.whatsapp-btn,.detail-panel .btn{background:#25D366;color:#fff}
.whatsapp-btn:hover,.detail-panel .btn:hover{background:#20bd5a}
.wholesale-copy{max-width:1000px;margin:0 auto}
.wholesale-form{max-width:1000px;margin:28px auto 0;background:#fff;color:#151515;border-radius:12px;padding:26px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.wholesale-form[hidden]{display:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field label{display:block;font-weight:700;margin-bottom:8px}
.form-field input,.form-field select{width:100%;height:46px;border:1px solid #d3d3d3;border-radius:7px;background:#fff;padding:0 12px;font:inherit;color:#151515}
.form-note{font-size:13px;margin:18px 0;color:#666!important}
.wholesale-form .btn{width:100%;margin-top:4px}
@media(max-width:600px){header{padding:0 4%;gap:12px}.brand,.brand img{width:105px;height:42px}nav{gap:12px;overflow-x:auto;white-space:nowrap}nav a:not(:last-child){display:block}nav a{font-size:12px}.form-grid{grid-template-columns:1fr}.wholesale-form{padding:20px}}