/* Diseño 2 · catálogo por secciones */
body{background:#fff}
header{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);color:#17141C;box-shadow:0 1px 0 #ECE8F1}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#4B1F7A,#FFC52E)}
.marca img{background:#F3EEFA}
.marca b span{color:#4B1F7A}
.marca small{opacity:.6}
.cab-acc{display:flex;gap:8px;align-items:center}
.btn-ubi{border:1px solid #DDD6E6;border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;text-decoration:none;color:#17141C;white-space:nowrap}
.btn-wa-cab{padding:8px 16px}

.portada{position:relative;overflow:hidden;padding:30px 0 30px;
  background:radial-gradient(circle at 85% 10%,rgba(255,197,46,.18),transparent 40%),radial-gradient(circle at 10% 100%,rgba(140,80,220,.45),transparent 50%),linear-gradient(135deg,#1E0838,#3A1466 55%,#4B1F7A)}
.cat-mes{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.2px;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px;margin-bottom:14px;background:rgba(255,255,255,.08)}
.portada h1{font-size:34px;font-weight:900;letter-spacing:-.6px;margin:0 0 10px}
.portada h1 span{color:#FFC52E}
.portada p{max-width:560px;margin:0 0 14px}
.sellos{display:flex;flex-wrap:wrap;gap:8px}
.sello{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:700;border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.sello b{display:none}
.mostrando{margin-top:14px;font-size:13px;opacity:.85;border-left:2px solid rgba(255,255,255,.4);padding-left:10px}
.mostrando b{font-size:15px}
.franja{background:#F1FBF4;border-bottom:1px solid #DDF1E3;font-size:13px;color:#2C4A36;padding:9px 0}
.franja b{color:#167A3E}

.barra{top:60px;border-bottom:1px solid #ECE8F1}
#q{border-radius:999px}
.chip{text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.5px;padding:8px 14px}
.chip.on{background:linear-gradient(135deg,#4B1F7A,#7B3FC4);border-color:transparent}

main{padding-top:6px}
.resumen{display:none}
.seccion{margin:22px 0 10px;display:flex;align-items:baseline;gap:10px;border-bottom:1px solid #ECE8F1;padding-bottom:8px}
.seccion h2{margin:0;font-size:14px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#2B0F4C}
.seccion span{font-size:12px;color:#8A8296;letter-spacing:.5px;text-transform:uppercase}
.grid{margin-bottom:6px}
.prod{background:#fff;border:1px solid #E8E4EE;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s}
@media (hover:hover){.prod:hover{border-color:#7B3FC4;box-shadow:0 0 0 2px rgba(123,63,196,.35),0 12px 28px rgba(43,15,76,.14);transform:translateY(-3px)}}
.prod .foto{background:#F5F4F8;cursor:pointer}
.prod .foto img{clip-path:inset(0 27% 13% 0);transform:translate(13%,6%)}
.etqs{position:absolute;top:10px;left:10px;display:flex;gap:4px;flex-wrap:wrap}
.etqs i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.4px;border-radius:999px;padding:4px 9px;color:#fff;background:#6B6575}
.etqs .e-nuevo{background:#1FA855}.etqs .e-ult{background:#FFC52E;color:#3a2a00}.etqs .e-sem{background:#7B3FC4}
.prod .cuerpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.prod .lbl{font-size:10px;font-weight:800;letter-spacing:1px;color:#8A8296;text-transform:uppercase}
.prod h3{margin:0;font-size:16px;line-height:1.25;cursor:pointer}
.prod .cap{font-size:13px;color:#6B6575}
.prod .colores{margin:6px 0 8px}
.tag-precio{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.5px;color:#fff;background:#4B1F7A;border-radius:6px;padding:3px 8px;margin-bottom:6px}
.fila-precio{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.precio-neg{background:#FFC52E;color:#2B0F4C;border-radius:10px;padding:6px 12px;font-weight:900;font-size:19px;line-height:1.1}
.precio-neg small{font-size:11px;font-weight:800;opacity:.75;margin-right:2px;color:#2B0F4C}
.btn-int{border:0;background:#1FA855;color:#fff;font-weight:800;font-size:12px;letter-spacing:.4px;text-transform:uppercase;border-radius:10px;padding:9px 12px;cursor:pointer}
.nota-p{font-size:12px;color:#6B6575;margin-top:8px;line-height:1.35}
.nota-p b{color:#17141C}
.cuotas-acc{margin-top:10px;border:1px solid #E8E4EE;border-radius:12px}
.cuotas-acc summary{list-style:none;cursor:pointer;padding:9px 12px;font-size:13px;font-weight:700;color:#4B1F7A;display:flex;justify-content:space-between}
.cuotas-acc summary::-webkit-details-marker{display:none}
.cuotas-acc summary::after{content:"▾"}
.cuotas-acc[open] summary::after{content:"▴"}
.cuotas-acc ul{list-style:none;margin:0;padding:0 12px 10px}
.cuotas-acc li{display:flex;justify-content:space-between;gap:6px;font-size:13px;padding:4px 0;border-top:1px dashed #EEE9F3;white-space:nowrap}
.cuotas-acc li b{color:#17141C}
.cuotas-acc li span small{display:block;font-size:10px;color:#8A8296;white-space:normal}
.bancos{background:#fff;border-bottom:1px solid #ECE8F1;padding:10px 0}
.bancos .dentro{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none}
.bancos .dentro::-webkit-scrollbar{display:none}
.bancos-t{font-size:12px;font-weight:800;color:#2B0F4C;white-space:nowrap}
.banco{flex:none;display:inline-flex;flex-direction:column;border:1px solid #E8E4EE;border-radius:12px;padding:6px 12px;background:#FAF9FC;line-height:1.2}
.banco b{font-size:13px;color:#17141C}
.banco small{font-size:11px;color:#6B6575}
.arriba{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:35;width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(135deg,#4B1F7A,#7B3FC4);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.2);display:none}
.arriba.ver{display:block}
body.con-pedido .arriba{bottom:calc(76px + env(safe-area-inset-bottom))}
@media (max-width:520px){
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .portada h1{font-size:28px}
  .prod .cuerpo{padding:10px}
  .precio-neg{font-size:16px;padding:5px 9px}
  .btn-int{width:100%}
  .btn-ubi{display:none}
  .bancos .dentro{display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  .bancos-t{grid-column:1/-1}
  .marca small{display:none}
  .cuotas-acc summary{padding:8px 10px;font-size:12px}
  .cuotas-acc ul{padding:0 10px 8px}
  .cuotas-acc li{font-size:12px;align-items:flex-start}
  .prod h3{font-size:15px}
}