/* v38 · Páginas de marca y de producto. Van sobre custom.css (tokens, cabecera, botones, pie y aviso de cookies). */
.pd-bc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:clamp(18px,3vh,32px) var(--gx) 0;color:var(--mute)}
.pd-bc a{display:inline-flex;align-items:center;min-height:32px;transition:color .4s}
.pd-bc a:hover{color:var(--fg)}
.pd-bc [aria-current]{color:var(--fg)}
.pd-bc span[aria-hidden]{opacity:.4}

/* producto: foto y texto */
.pd-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center;padding:clamp(24px,5vh,56px) var(--gx) clamp(56px,10vh,110px)}
.pd-stage{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-height:76vh;width:100%;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:radial-gradient(ellipse 70% 38% at 50% 92%,rgba(245,0,124,.30),rgba(250,0,168,.07) 55%,rgba(0,0,0,0) 80%),radial-gradient(circle at 50% 40%,#141414,#070707 70%)}
.pd-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:13%;height:2px;background:linear-gradient(90deg,rgba(245,0,124,0),var(--pink) 30%,var(--neon) 70%,rgba(250,0,168,0));box-shadow:0 0 30px rgba(250,0,168,.45);opacity:.6}
.pd-stage img{position:absolute;inset:0;z-index:1;margin:auto;width:auto;height:auto;max-width:72%;max-height:72%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}   /* absoluta: el % de alto se resuelve y el producto nunca se corta */
.pd-stage.wide img{max-width:90%}
.pd-txt{max-width:620px}
.cm-k{display:flex;align-items:center;gap:12px}
.cm-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink)}
.pd-txt h1,.br-txt h1{font-weight:300;font-size:clamp(38px,4.6vw,78px);letter-spacing:-.05em;line-height:.98;margin:20px 0 24px}
.pd-txt h1 span{display:block}
.pd-txt h1 b,.br-txt h1 b{font-weight:700}
.pd-sum{font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:rgba(255,255,255,.76)}
.pd-sku{margin-top:18px}
.pd-txt .cm-acts,.br-txt .cm-acts{margin-top:14px}

/* características y especificaciones */
.pd-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,110px);padding:0 var(--gx) clamp(70px,12vh,130px)}
.pd-cols h2,.pd-why h2{font-size:11px;font-weight:600;margin-bottom:18px}
.pd-cols h2:not(:first-child){margin-top:44px}
.pd-feat{list-style:none;border-bottom:1px solid var(--line)}
.pd-feat li{position:relative;padding:15px 0 15px 26px;border-top:1px solid var(--line);font-size:16px;line-height:1.55;color:rgba(255,255,255,.86)}
.pd-feat li::before{content:"";position:absolute;left:2px;top:24px;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.pd-use{font-size:16px;line-height:1.65;color:rgba(255,255,255,.76)}
.pd-specs{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);border-bottom:1px solid var(--line)}
.pd-specs dt,.pd-specs dd{padding:14px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5}
.pd-specs dt{color:var(--mute);padding-right:20px}
.pd-specs dd{color:var(--fg)}
.pd-src{margin-top:18px;font-size:10px;letter-spacing:.12em;line-height:1.7}
.pd-src a{color:var(--fg);border-bottom:1px solid rgba(255,255,255,.3)}

/* por qué cotizar con SoundShine */
.pd-why{padding:0 var(--gx) clamp(70px,12vh,130px)}
.pd-why ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pd-why li{position:relative;padding:22px 22px 26px;border:1px solid var(--line);border-radius:16px;background:#070707}
.pd-why li::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;background:linear-gradient(90deg,var(--pink),var(--neon) 60%,rgba(250,0,168,0))}
.pd-why li span{color:var(--pink);font-size:11px}
.pd-why li b{display:block;margin:14px 0 8px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.pd-why li p{font-size:14px;line-height:1.55;color:var(--mute)}

/* tarjetas de producto */
.pd-rel{padding:0 var(--gx) clamp(70px,12vh,130px)}
.pd-rel-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px}
.pd-rel-h h2{font-weight:300;font-size:clamp(28px,3vw,46px);letter-spacing:-.045em;line-height:1}
.pd-rel-h a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--mute);transition:color .4s}
.pd-rel-h a:hover{color:var(--fg)}
.pc-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pc{display:flex;flex-direction:column;gap:8px;height:100%;padding:14px 14px 18px;border:1px solid var(--line);border-radius:16px;background:#060606;transition:border-color .5s var(--ease),background .5s var(--ease)}
.pc:hover{border-color:rgba(245,0,124,.6);background:#0b0b0b}
.pc-img{position:relative;display:block;aspect-ratio:4/3;margin-bottom:8px;border-radius:10px;background:radial-gradient(ellipse 70% 40% at 50% 95%,rgba(245,0,124,.18),rgba(0,0,0,0) 75%),#0d0d0d;overflow:hidden}
.pc-img img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:78%;max-height:78%;object-fit:contain;transition:transform .8s var(--ease)}
.pc:hover .pc-img img{transform:scale(1.04)}
.pc-custom .pc-img img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover}
.pc .mono{font-size:10px}
.pc b{font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.pc-go{margin-top:auto;padding-top:8px;color:var(--pink)}
.pc-go span{display:inline-block;transition:transform .6s var(--ease)}
.pc:hover .pc-go span{transform:translateX(4px)}

/* cierre: menos aire que en personalizados, aquí viene después de la lista */
.cm-end{padding-top:clamp(30px,6vh,70px)}

/* marca */
.br-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:18px var(--gx) 0}
.br-tabs a{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1px solid var(--line);border-radius:999px;color:var(--mute);transition:color .4s,border-color .4s}
.br-tabs a:hover{color:var(--fg);border-color:rgba(255,255,255,.4)}
.br-tabs a[aria-current]{color:#000;background:var(--fg);border-color:var(--fg)}
.br-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,6vw,110px);align-items:center;padding:clamp(40px,8vh,90px) var(--gx) clamp(60px,10vh,110px)}
.br-txt{max-width:760px}
.br-txt h1{font-size:clamp(40px,5.6vw,96px)}
.br-logo{display:grid;place-items:center;aspect-ratio:1/1;border:1px solid var(--line);border-radius:22px;background:radial-gradient(ellipse 70% 40% at 50% 92%,rgba(245,0,124,.22),rgba(0,0,0,0) 75%),#070707}
.br-logo img{width:62%;height:auto}
.br-waves img,.br-jbl img{width:auto;height:46%}
.br-list .pc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1100px){
  .pc-grid,.br-list .pc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pd-why ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .pd-hero,.br-hero,.pd-cols{grid-template-columns:minmax(0,1fr)}
  .pd-stage{aspect-ratio:4/3}
  .br-logo{aspect-ratio:16/7;order:-1}
  .br-logo img{width:46%}
  .br-waves img,.br-jbl img{height:58%}
  .pd-cols h2:not(:first-child){margin-top:36px}
}
@media (max-width:700px){
  .pc-grid,.br-list .pc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pc{padding:10px 10px 14px;border-radius:12px}
  .pc b{font-size:14px}
  .pd-why ol{gap:10px}
  .pd-why li{padding:16px 14px 18px}
  .pd-why li::before{left:14px;right:14px}
  .pd-why li b{font-size:15px;margin:10px 0 6px}
  .pd-why li p{font-size:13px}
  .pd-txt h1{font-size:clamp(34px,10vw,52px)}
  .br-txt h1{font-size:clamp(36px,10.4vw,56px)}
  .pd-specs{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .pd-specs dt,.pd-specs dd{font-size:13.5px;padding:12px 0}
  .pd-rel-h{flex-wrap:wrap}
}

/* «¿Buscas otro modelo?»: rellena lo que falta de la última fila; --s4/--s3/--s2 las calcula build.py para 4, 3 y 2 columnas */
.pc-ask{grid-column:span var(--s4)}
.pc-ask .pc{justify-content:center;gap:12px;padding:26px;border-style:dashed;border-color:rgba(255,255,255,.18);background:radial-gradient(ellipse 80% 70% at 100% 100%,rgba(245,0,124,.14),rgba(0,0,0,0) 70%),#060606}
.pc-ask b{font-weight:300;font-size:clamp(22px,1.9vw,30px);letter-spacing:-.035em;line-height:1.08}
.pc-ask span:not(.pc-go){font-size:14px;line-height:1.55;color:var(--mute);max-width:420px}
.pc-ask .pc-go{margin-top:6px}
@media (max-width:1100px){.pc-ask{grid-column:span var(--s3)}}
@media (max-width:700px){.pc-ask{grid-column:span var(--s2)}.pc-ask .pc{padding:18px}.pc-ask b{font-size:20px}}