/* AP27 · Página de producto basada en los renders "producto promocionales" / "producto uniformes" */
.product-page{width:min(1240px,calc(100% - 44px));margin:0 auto;padding:18px 0 56px;color:var(--navy)}
.pp-ico{display:inline-grid;place-items:center;flex:0 0 auto;color:var(--blue)}
.pp-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pp-ico.pink{color:var(--pink)}

.pp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.84rem;color:var(--muted);margin-bottom:18px}
.pp-crumbs a{color:var(--muted);text-decoration:none}.pp-crumbs a:hover{color:var(--blue);text-decoration:underline}
.pp-crumbs b{color:var(--navy);font-weight:700}.pp-home{display:inline-flex;width:18px;height:18px;color:var(--navy)!important}
.pp-home svg{width:100%;height:100%;fill:currentColor}

.pp-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.pp-media{display:grid;gap:12px;min-width:0}
.pp-main{position:relative;border:1px solid #dfe9f6;border-radius:16px;overflow:hidden;background:#fff}
.pp-main-img{display:block;width:100%;aspect-ratio:1/1;max-height:560px;border:0;padding:0;background:#fff;cursor:zoom-in}
.pp-main-img img{width:100%;height:100%;object-fit:contain;padding:22px}
.pp-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid #e3ebf5;background:#fff;color:var(--navy);font-size:1.6rem;line-height:1;box-shadow:0 6px 16px rgba(15,45,120,.12);cursor:pointer}
.pp-arrow.prev{left:16px}.pp-arrow.next{right:16px}
.pp-zoom-hint{position:absolute;right:14px;bottom:14px;padding:6px 11px;border-radius:20px;background:#07145bcc;color:#fff;font-weight:800;font-size:.76rem;pointer-events:none}
.pp-thumbs{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.pp-thumbs button{flex:0 0 86px;height:86px;border:1.5px solid #dfe9f6;border-radius:11px;background:#fff;padding:5px;cursor:pointer}
.pp-thumbs button.selected{border:2px solid var(--pink)}
.pp-thumbs img{width:100%;height:100%;object-fit:contain}

.pp-info{min-width:0}
.pp-sku{display:inline-flex;align-items:center;gap:12px;padding:12px 20px;border-radius:11px;background:#e7f1ff;color:var(--navy);font-weight:800;font-size:1.05rem}
.pp-sku .pp-ico{width:26px;height:26px}.pp-sku strong{font-size:1.45rem;letter-spacing:-.01em}
.pp-info h1{margin:16px 0 6px;font-size:clamp(1.8rem,2.8vw,2.45rem);line-height:1.08;letter-spacing:-.03em;color:#0a0f3a}
.pp-cat{margin:0 0 8px;font-weight:800}.pp-cat a{color:var(--blue);font-weight:600}
.pp-desc{margin:0 0 16px;color:var(--muted);line-height:1.5}
.pp-label{margin:0 0 8px;font-weight:800}
.pp-swatches{display:flex;flex-wrap:wrap;gap:10px}
.pp-swatch{width:42px;height:42px;padding:3px;border-radius:50%;border:2px solid transparent;background:#fff;cursor:pointer;position:relative}
.pp-swatch i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(7,20,91,.18)}
.pp-swatch.selected{border-color:var(--pink)}
.pp-swatch:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.pp-swatch.empty i{opacity:.4}.pp-swatch.empty:after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:#9aa6bf;transform:rotate(-40deg)}
.pp-variant{margin:8px 0 0;color:var(--muted);font-size:.9rem}.pp-variant b{color:var(--navy)}
.product-page .price-block{margin:16px 0 12px}
.pp-tiles{display:grid;grid-template-columns:1fr 1.2fr;gap:12px}
.pp-tiles.three{grid-template-columns:repeat(3,1fr)}
.pp-tile{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;background:#eef6ff}
.pp-tile .pp-ico{width:32px;height:32px}
.pp-tile small{display:block;color:var(--muted);font-size:.8rem}.pp-tile strong{display:block;font-size:.98rem}
.pp-buy{display:grid;grid-template-columns:120px 1fr;gap:12px;margin-top:14px}
.pp-qty{display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line);border-radius:12px;padding:5px 12px;background:#fff}
.pp-qty span{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pp-qty input{border:0;outline:0;font-size:1.15rem;font-weight:800;color:var(--navy);width:100%;padding:0}
.pp-qty:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px #0877ff22}
.pp-cta{min-height:56px;font-size:1.12rem;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:12px}
.pp-cta span{font-size:1.5rem;line-height:1}
.pp-wa{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;margin-top:10px;border-radius:12px;background:#1fb655;color:#fff;font-weight:800;font-size:1.05rem;text-decoration:none}
.pp-wa .pp-ico{width:28px;height:28px;color:#fff}.pp-wa.disabled{opacity:.45;pointer-events:none}
.product-page .stock-message{margin-top:10px}
.product-page .mockup-launch{margin-top:2px}

.pp-attrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
.pp-attr{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:13px;background:#eef6ff;min-width:0}
.pp-attr .pp-ico{width:36px;height:36px}
.pp-attr small{display:block;font-weight:800;color:var(--navy);font-size:.95rem}
.pp-attr strong{display:block;font-weight:500;color:var(--muted);overflow-wrap:anywhere}
.pp-card{display:flex;gap:20px;margin-top:16px;padding:22px 26px;border:1px solid #dfe9f6;border-radius:14px;background:#fff}
.pp-card .pp-ico{width:34px;height:34px}
.pp-card h2{margin:0 0 6px;font-size:1.15rem}.pp-card p{margin:0;color:var(--muted);line-height:1.55}

.pp-band{display:grid;grid-template-columns:190px minmax(0,1fr) auto auto;align-items:center;gap:24px;margin-top:20px;padding:0 24px 0 0;border-radius:14px;overflow:hidden;background:linear-gradient(90deg,#eef6ff,#f6f2ff)}
.pp-band img{width:190px;height:100px;object-fit:cover;background:#fff}
.pp-band-copy{padding-left:22px;border-left:2px solid #c7dbf5}
.pp-band h2{margin:0;font-size:1.3rem;color:#1b2a8f}.pp-band p{margin:4px 0 0;color:var(--muted);font-size:.9rem}
.pp-band-chips{display:flex;gap:16px;padding-left:22px;border-left:1px solid #c7dbf5}
.pp-band-chips span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.82rem;color:var(--muted);text-align:center;max-width:90px}
.pp-band-chips .pp-ico{width:24px;height:24px;color:var(--pink)}
.pp-band .secondary{white-space:nowrap}

.pp-bottom{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:30px;margin-top:30px}
.pp-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pp-sec-head h2{display:flex;align-items:center;gap:12px;margin:0;font-size:1.22rem}
.pp-sec-head h2 .pp-ico{width:30px;height:30px}
.pp-sec-head a{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;text-decoration:none;font-size:.92rem}
.pp-sec-head a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.pp-faq details{border:1px solid #dfe9f6;border-radius:10px;margin-bottom:8px;background:#fff}
.pp-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:13px 18px;cursor:pointer;font-weight:500}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary:after{content:"";width:8px;height:8px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translateY(-3px);transition:.2s}
.pp-faq details[open] summary:after{transform:rotate(-135deg)}
.pp-faq details p{margin:0;padding:0 18px 14px;color:var(--muted)}
.pp-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pp-related-card{position:relative;display:flex;flex-direction:column;padding:12px 10px;border:1px solid #dfe9f6;border-radius:12px;background:#fff;color:var(--navy);text-decoration:none;transition:.18s}
.pp-related-card:hover{border-color:#8dbff4;box-shadow:var(--shadow);transform:translateY(-2px)}
.pp-related-card img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:8px}
.pp-related-card small{color:var(--muted);font-size:.74rem}
.pp-related-card strong{font-size:.84rem;font-weight:600;line-height:1.25;margin:2px 0 6px;min-height:2.5em}
.pp-related-card em{margin-top:auto;font-style:normal;color:var(--pink);font-weight:850;font-size:.95rem;white-space:nowrap}
.pp-related-card em span{font-size:.68rem;font-weight:800}
.pp-fav{position:absolute;right:10px;top:10px;width:20px;height:20px;color:var(--blue)}
.pp-fav svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7}

@media(max-width:1080px){.pp-attrs{grid-template-columns:repeat(2,1fr)}.pp-band{grid-template-columns:150px 1fr;padding:0}.pp-band img{width:150px}.pp-band-chips{grid-column:1/-1;border:0;padding:0 22px}.pp-band .secondary{grid-column:1/-1;margin:0 22px 18px}.pp-bottom{grid-template-columns:1fr}}
@media(max-width:860px){.pp-top{grid-template-columns:1fr}.pp-main-img{max-height:none}}
@media(max-width:620px){.product-page{width:calc(100% - 28px);padding-top:12px}.pp-main-img{aspect-ratio:1/.85}.pp-main-img img{padding:12px}.pp-thumbs button{flex-basis:68px;height:68px}.pp-sku{padding:9px 14px;font-size:.92rem}.pp-sku strong{font-size:1.15rem}.pp-tiles,.pp-tiles.three{grid-template-columns:1fr}.pp-buy{grid-template-columns:100px 1fr}.pp-attrs{grid-template-columns:1fr}.pp-card{padding:18px}.pp-band{grid-template-columns:1fr}.pp-band img{width:100%;height:140px}.pp-band-copy{border:0;padding:0 18px}.pp-band-chips{padding:0 18px}.pp-band .secondary{margin:0 18px 18px}.pp-related-grid{grid-template-columns:repeat(2,1fr)}.pp-arrow{width:36px;height:36px}}
.pp-band img{background:transparent;height:100%;min-height:100px}
/* Móvil: imagen, nombre, precio, color y CTA primero; la muestra virtual después del CTA */
@media(max-width:860px){.pp-top{display:flex;flex-direction:column;gap:14px}.pp-media{display:contents}.pp-main{order:1}.pp-thumbs{order:2}.pp-info{order:3}.pp-top .mockup-launch{order:4}}
@media(max-width:620px){.pp-attrs{grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.pp-attr{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}.pp-attr .pp-ico{width:28px;height:28px}.pp-attr small{font-size:.86rem}.pp-attr strong{font-size:.88rem}.pp-band img{min-height:0}}
@media(max-width:620px){.help-band{flex-wrap:wrap;padding:18px}.help-band a{margin-left:0}}
.pp-thumbs{width:100%;max-width:100%;min-width:0}.pp-top>*{min-width:0;max-width:100%}