/* ============================================================
   Extin Gasex — Sistema de arte gráfico (stand-in de fotos)
   Paneles técnicos en paleta rojo / negro / blanco.
   Reemplazables por fotografía real cuando esté disponible.
   ============================================================ */

.eg-art { position: relative; overflow: hidden; display: grid; place-items: center; background: var(--ink); color: #fff; }
.eg-art__grid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background-image: radial-gradient(rgba(255,255,255,.11) 1.3px, transparent 1.4px); background-size: 18px 18px; opacity: .55; }

/* ---------- Catálogo (foto real) ---------- */
.cat__photo { position: relative; background: linear-gradient(160deg, #FAFAFA, #ECECEE); display: block; }
.cat__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s var(--ease); }
.cat:hover .cat__photo img { transform: scale(1.04); }
.cat__code { position: absolute; top: 14px; left: 14px; z-index: 1; font-style: italic; font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: #fff; background: var(--ink); padding: 5px 13px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }

/* ---------- Catálogo ---------- */
.eg-art--cat::after { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(214,0,0,.42), transparent 66%); top: -64px; right: -54px; }
.eg-art__code { position: relative; z-index: 1; font-style: italic; font-weight: 800; font-size: clamp(38px, 6.5vw, 60px); letter-spacing: -.03em; line-height: 1; color: #fff; }
.eg-art__ico { position: absolute; top: 15px; left: 16px; z-index: 1; color: var(--accent); }
.eg-art__ico svg { width: 28px; height: 28px; }
.eg-art__cap { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 1; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; letter-spacing: .03em; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Productos (foto real) ---------- */
.prod__photo { position: relative; background: linear-gradient(160deg, #FAFAFA, #ECECEE); display: block; overflow: hidden; }
.prod__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s var(--ease); }
.prod:hover .prod__photo img { transform: scale(1.04); }

/* ---------- Productos ---------- */
.eg-art--prod::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(214,0,0,.38), transparent 66%); bottom: -50px; left: -40px; }
.eg-art__pico { position: relative; z-index: 1; color: var(--accent); display: grid; place-items: center; }
.eg-art__pico svg { width: 78px; height: 78px; stroke-width: 1.35; }

/* ---------- Hero foto real ---------- */
.hero__photo--real { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--gray-100); }
.hero__photo--real img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

/* ---------- Hero ---------- */
.eg-art--hero::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(214,0,0,.5), transparent 62%); top: -16%; right: -18%; }
.eg-art__chip { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; backdrop-filter: blur(4px); }
.eg-art__chip svg { width: 15px; height: 15px; color: var(--accent); }
.eg-art__disc { position: relative; z-index: 1; width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 36% 30%, #F23B30, var(--red-700)); box-shadow: 0 34px 70px rgba(214,0,0,.42), inset 0 2px 14px rgba(255,255,255,.25); }
.eg-art__disc svg { width: 46%; height: 46%; color: #fff; stroke-width: 1.6; }
.eg-art__hcap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 56px 26px 22px; text-align: center; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.78); background: linear-gradient(0deg, rgba(17,17,17,.9), transparent); }

/* ---------- Mapa estilizado (claro) ---------- */
.eg-map { position: relative; overflow: hidden; background: var(--gray-50); border: 1px solid var(--border); }
.eg-map__grid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background-image: radial-gradient(var(--gray-300) 1.2px, transparent 1.3px); background-size: 22px 22px; opacity: .7; -webkit-mask-image: radial-gradient(120% 120% at 50% 45%, #000 55%, transparent 92%); mask-image: radial-gradient(120% 120% at 50% 45%, #000 55%, transparent 92%); }
.eg-map__route { position: absolute; height: 3px; border-radius: 3px; background: rgba(214, 0, 0, 0.72); background: color-mix(in srgb, var(--red) 72%, transparent); }
.eg-map__route.r1 { width: 86%; left: -6%; top: 40%; transform: rotate(-12deg); }
.eg-map__route.r2 { width: 78%; right: -6%; top: 62%; transform: rotate(9deg); }
.eg-map__route.r3 { width: 60%; left: 18%; top: 24%; transform: rotate(26deg); opacity: .5; }
.eg-map__zone { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); opacity: .32; box-shadow: 0 0 0 5px rgba(17,17,17,.05); }
.eg-map__label { position: absolute; left: 18px; bottom: 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; letter-spacing: .08em; color: var(--text-mute); }

/* Mapa sobre fondo oscuro (variante premium) */
[data-variant="premium"] .eg-map { background: var(--gray-900); border-color: #2A2A2E; }
[data-variant="premium"] .eg-map__grid { background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.3px); }
[data-variant="premium"] .eg-map__zone { background: #fff; opacity: .4; box-shadow: 0 0 0 5px rgba(255,255,255,.06); }
[data-variant="premium"] .eg-map__label { color: var(--gray-400); }