/* GSP — Electrónica product pages. Canonical tokens. Rotating hero layouts for variety. */

/* Shared image placeholder */
.img-ph { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a2744 0%, #2a3f6b 50%, var(--navy-700) 100%); border-radius: var(--radius-xl); }
.img-ph .img-ph-icon { width: 76px; height: 76px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.img-ph .img-ph-icon svg { stroke: rgba(255,255,255,.78); }
.img-ph .img-ph-label { position: absolute; bottom: 14px; left: 18px; font-family: var(--font-display); font-size: .6rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); }

/* ── HERO: shared editorial bits ── */
.hero--editorial { justify-content: flex-start; }
.hero--editorial .hero-overlay { background: linear-gradient(95deg, rgba(13,21,38,.94) 0%, rgba(19,29,51,.82) 40%, rgba(19,29,51,.42) 72%, rgba(19,29,51,.14) 100%); }
.hero-editorial-inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--section-x); }
.hero-editorial-col { max-width: 720px; }
.hero-eyebrow { display: flex; align-items: center; gap: .8rem; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--red-500); margin-bottom: 1.4rem; }
.hero-eyebrow::before { content: ''; width: 3px; height: 20px; background: var(--red-500); display: block; }
.hero--editorial .hero-title, .hero--split .hero-title { text-align: left; }
.hero-subtitle--left { margin: 0; text-align: left; color: rgba(255,255,255,.62); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 2.2rem 0; }
.hero-stat { padding-right: 1.4rem; margin-right: 1.4rem; border-right: 1px solid rgba(255,255,255,.16); }
.hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero-stat-num { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: #fff; line-height: 1; white-space: nowrap; }
.hero-stat-num .hl { color: var(--red-500); }
.hero-stat-label { font-size: .7rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1px; margin-top: .4rem; font-weight: 600; }
.hero--editorial .hero-cta-group, .hero--split .hero-cta-group { justify-content: flex-start; }
.hero-stats--center { justify-content: center; }

/* ── HERO: color sólido con glow (sin foto/video, altura ajustada al texto) ── */
.hero--solid { min-height: 0; overflow: hidden; background: linear-gradient(155deg, var(--navy-800) 0%, #0E1526 100%); padding-top: clamp(9rem,16vh,11rem); padding-bottom: clamp(5.5rem,10vh,7.5rem); align-items: flex-start; }
.hero--solid .hero-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 12% 0%, rgba(231,26,33,.14), transparent 52%), radial-gradient(ellipse at 92% 100%, rgba(63,78,109,.42), transparent 55%); }

/* Sectores que protegemos (franja de pills) */
.prod-sectors { background: var(--white); }
.prod-sectors-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.6rem; }
.prod-sector { display: flex; align-items: center; gap: .8rem; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--radius-pill); padding: .7rem 1.5rem .7rem .8rem; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.prod-sector:hover { transform: translateY(-3px); border-color: var(--red-200, #f3c9cb); box-shadow: var(--shadow-sm, 0 6px 18px rgba(30,45,79,.1)); }
.prod-sector-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--red-glow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prod-sector-ic svg { stroke: var(--navy-700); }
.prod-sector span { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .4px; text-transform: uppercase; color: var(--navy-700); white-space: nowrap; }

/* ── HERO: split (text left + spec/feature panel right) ── */
.hero--split .hero-overlay { background: linear-gradient(100deg, rgba(13,21,38,.92) 0%, rgba(19,29,51,.84) 55%, rgba(19,29,51,.6) 100%); }
.hero-split-inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--section-x); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
@media(max-width:880px){ .hero-split-inner { grid-template-columns: 1fr; } .hero-split-panel { display: none; } }
.hero-split-panel { background: rgba(11,17,30,.82); border: 1px solid rgba(255,255,255,.1); border-top: 2px solid var(--red-500); border-radius: var(--radius-xl); padding: 1.75rem; }
.hero-split-panel h4 { font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--red-500); margin: 0 0 1rem; }
.hero-split-item { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.hero-split-item:last-child { border-bottom: none; }
.hero-split-item svg { stroke: var(--red-500); flex-shrink: 0; margin-top: 2px; }
.hero-split-item span { font-size: .85rem; color: rgba(255,255,255,.82); line-height: 1.4; font-weight: 500; }

/* ── PRODUCT BODY ── */
.prod-intro { background: var(--white); }
.prod-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.prod-intro-grid.reverse .prod-intro-text { order: 2; }
@media(max-width:860px){ .prod-intro-grid, .prod-intro-grid.reverse { grid-template-columns: 1fr; } .prod-intro-grid.reverse .prod-intro-text { order: 0; } }
.prod-pill { display: inline-block; background: var(--red-500); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .9rem; letter-spacing: 2px; text-transform: uppercase; padding: .65rem 1.5rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-red); margin-bottom: 1.3rem; }
.prod-intro-text h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem,3vw,2.1rem); color: var(--navy-700); line-height: 1.15; margin-bottom: 1.1rem; text-transform: none; }
.prod-intro-text p { color: var(--gray-600); line-height: 1.7; margin-bottom: 1rem; font-size: .95rem; }
.prod-intro-img .img-ph { aspect-ratio: 4/3; }
.prod-intro-img img.img-real, .prod-detail-img img.img-real { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 40px rgba(30,45,79,.18); }
.prod-intro-img img.img-real { aspect-ratio: 4/3; }
.prod-intro-img img.img-real[src$="laplata-intro.webp"] { aspect-ratio: 920/513; }
.prod-detail-img img.img-real { aspect-ratio: 4/3.3; }

.prod-features { background: var(--gray-50); }
.prod-features-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 3rem; }
@media(max-width:900px){ .prod-features-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:520px){ .prod-features-grid { grid-template-columns: 1fr; } }
.prod-feature-ic { width: 56px; height: 56px; border-radius: 14px; background: var(--red-glow); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.prod-feature-ic svg { stroke: var(--navy-700); }
.prod-feature h3 { font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-transform: uppercase; color: var(--navy-700); margin-bottom: .5rem; letter-spacing: .3px; }
.prod-feature p { font-size: .86rem; color: var(--gray-600); line-height: 1.6; }

/* Detail: spec panel + image */
.prod-detail { background: var(--navy-800); position: relative; overflow: hidden; }
.prod-detail::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 80% 30%, rgba(231,26,33,.07), transparent 55%), radial-gradient(ellipse at 10% 80%, rgba(63,78,109,.3), transparent 55%); }
.prod-detail-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.prod-detail-grid.reverse .prod-detail-text { order: 2; }
@media(max-width:860px){ .prod-detail-grid, .prod-detail-grid.reverse { grid-template-columns: 1fr; } .prod-detail-grid.reverse .prod-detail-text { order: 0; } }
.prod-detail h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem,3vw,2rem); color: #fff; text-transform: uppercase; line-height: 1.15; margin-bottom: 1.5rem; }
.prod-detail-list { list-style: none; padding: 0; margin: 0; }
.prod-detail-list li { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.5; }
.prod-detail-list li:last-child { border-bottom: none; }
.prod-detail-list svg { stroke: var(--red-500); flex-shrink: 0; margin-top: 3px; }
.prod-detail-list strong { color: #fff; font-weight: 700; }
.prod-detail-img .img-ph { aspect-ratio: 4/3.3; }

/* CTA band */
.prod-cta { background: #1a2131; position: relative; overflow: hidden; text-align: center; }
.prod-cta::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 20% 20%, rgba(231,26,33,.16), transparent 45%), radial-gradient(circle at 85% 90%, rgba(255,255,255,.05), transparent 50%); }
.prod-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.prod-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,3.2vw,2.3rem); color: #fff; text-transform: uppercase; line-height: 1.15; margin-bottom: 1rem; }
.prod-cta p { color: rgba(255,255,255,.62); font-size: 1.05rem; line-height: 1.6; max-width: 560px; margin: 0 auto 2rem; }

/* Habilitaciones / certificaciones strip */
.prod-creds { background: var(--white); border-top: 1px solid var(--gray-100); }
.prod-creds-label { text-align: center; font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-400); margin-bottom: 1.6rem; }
.prod-creds-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 2rem 3rem; }
.prod-cred { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 160px; }
.prod-cred-chip { width: 96px; height: 96px; border-radius: 50%; background: #fff; border: 1px solid var(--gray-100); box-shadow: 0 8px 24px rgba(30,45,79,.08); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: box-shadow var(--dur) var(--ease); }
.prod-cred:hover .prod-cred-chip { box-shadow: 0 12px 32px rgba(231,26,33,.14); }
.prod-cred-chip img { width: 72px; height: 72px; object-fit: contain; }
.prod-cred h4 { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--navy-700, #3F4E6D); margin-bottom: .25rem; }
.prod-cred span { font-size: .8rem; color: var(--gray-400); line-height: 1.3; }