/* ============================================================================
   PÁGINA DE PRODUCTO (server-rendered, SEO). Prefijo .pd-, aislada bajo body.pd
   Hereda el shell oscuro de landing.css y el header global.
   ============================================================================ */
.pd{ --pd-line:#1e1e1e; --pd-line2:#2a2a2a; --pd-mut:#9a9a9a; --pd-red:#e50914; --pd-red2:#ff3b43; }
.pd .wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.pd h1,.pd h2,.pd h3{font-family:'Barlow Condensed','Barlow',sans-serif}

/* migas */
.pd-crumbs{border-bottom:1px solid var(--pd-line);padding:14px 0;font-size:13px;color:var(--pd-mut)}
.pd-crumbs a{color:var(--pd-mut)}
.pd-crumbs a:hover{color:#fff}
.pd-crumbs span{margin:0 7px;color:#4a4a4a}
.pd-crumbs b{color:#eaeaea;font-weight:600}

/* hero */
.pd-hero{padding:36px 0 44px;border-bottom:1px solid var(--pd-line)}
.pd-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start}
.pd-gal{background:#fff;border-radius:16px;padding:26px;display:flex;align-items:center;justify-content:center;
  min-height:340px;border:1px solid var(--pd-line2)}
.pd-img{width:100%;height:auto;max-height:420px;object-fit:contain;display:block}
.pd-img--none{width:100%;height:300px;border-radius:10px;
  background:repeating-linear-gradient(135deg,#f3f4f6,#f3f4f6 8px,#e9ebee 8px,#e9ebee 16px)}
.pd-brand{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pd-red2)}
.pd-info h1{font-size:clamp(28px,3.6vw,42px);font-weight:800;color:#fff;line-height:1.08;margin:8px 0 0}
.pd-model{color:var(--pd-mut);font-size:14px;margin-top:7px}
.pd-price{margin-top:20px;padding:16px 18px;border:1px solid var(--pd-line2);border-radius:12px;background:#111}
.pd-price b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:800;color:#fff;
  line-height:1;font-variant-numeric:tabular-nums}
.pd-price b.q{font-size:23px;color:#ffc24b}
.pd-price small{display:block;color:var(--pd-mut);font-size:12.5px;margin-top:5px}
.pd-short{color:#c8c8c8;font-size:15px;line-height:1.7;margin-top:18px}
.pd-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pd-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:10px;
  font-weight:700;font-size:14.5px;border:1px solid transparent;transition:transform .16s,background .16s,border-color .16s}
.pd-btn:hover{transform:translateY(-1px)}
.pd-btn-p{background:var(--pd-red);color:#fff}
.pd-btn-p:hover{background:var(--pd-red2)}
.pd-btn-o{border-color:var(--pd-line2);color:#eaeaea}
.pd-btn-o:hover{border-color:var(--pd-red);color:#fff}
.pd-btn-wa{border-color:rgba(37,211,102,.4);color:#dff7e8;background:rgba(37,211,102,.08)}
.pd-btn-wa:hover{border-color:#25d366;color:#fff}
.pd-help{color:var(--pd-mut);font-size:13.5px;margin-top:15px}
.pd-help a{color:var(--pd-red2);font-weight:600}

/* secciones */
.pd-sec{padding:44px 0;border-bottom:1px solid var(--pd-line)}
.pd-sec.alt{background:#0d0d0d}
.pd-sec h2{font-size:clamp(21px,2.4vw,28px);font-weight:800;color:#fff;margin:0 0 18px}
.pd-desc{color:#c2c2c2;font-size:15px;line-height:1.8;max-width:80ch;white-space:pre-line}
.pd-specs{width:100%;border-collapse:collapse;max-width:760px}
.pd-specs tr{border-bottom:1px solid var(--pd-line)}
.pd-specs th{text-align:left;padding:11px 14px 11px 0;color:var(--pd-mut);font-weight:600;font-size:13.5px;width:190px}
.pd-specs td{padding:11px 0;color:#eaeaea;font-size:14.5px}

/* relacionados */
.pd-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pd-rel-card{border:1px solid var(--pd-line);border-radius:14px;overflow:hidden;background:#111;
  display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.pd-rel-card:hover{border-color:var(--pd-red);transform:translateY(-3px)}
.pd-rel-card img{width:100%;height:170px;object-fit:contain;background:#fff;display:block;padding:12px}
.pd-rel-ph{width:100%;height:170px;background:#191919}
.pd-rel-b{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.pd-rel-b .br{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pd-red2);font-weight:700}
.pd-rel-b h3{font-size:15px;color:#fff;margin:5px 0 0;line-height:1.3;font-weight:600}
.pd-rel-b .go{margin-top:auto;padding-top:11px;color:var(--pd-mut);font-size:13px}
.pd-rel-card:hover .go{color:var(--pd-red2)}

/* cross-selling */
.pd-chips{display:flex;flex-wrap:wrap;gap:9px}
.pd-chips a{border:1px solid var(--pd-line2);border-radius:999px;padding:9px 16px;font-size:13.5px;
  color:#cfcfcf;transition:border-color .16s,color .16s}
.pd-chips a:hover{border-color:var(--pd-red);color:#fff}

@media(max-width:900px){
  .pd-hero .wrap{grid-template-columns:1fr;gap:26px}
  .pd-rel{grid-template-columns:repeat(2,1fr)}
  .pd-specs th{width:140px}
}
@media(max-width:560px){
  .pd-rel{grid-template-columns:1fr}
  .pd-ctas .pd-btn{flex:1;min-width:100%}
  .pd-gal{min-height:240px;padding:18px}
}