/* Las tres muestras permanecen visibles; la selección actualiza el enlace principal. */
.hero-visual{padding-top:0}
.demo-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:22px}
.demo-option{min-width:0;display:block;padding:0;border:1px solid #4c5142;background:#1d2118;color:#d0d7c2;text-align:left;border-radius:3px;cursor:pointer;transition:border-color .15s,background .15s}
.demo-option img{display:block;width:100%;height:53px;object-fit:cover;object-position:top;border-radius:2px 2px 0 0;opacity:.7}
.demo-option span{display:flex;justify-content:space-between;align-items:center;min-height:36px;padding:8px 10px;font-size:1rem}
.demo-option span:after{content:'↗';font-size:1rem;color:#aeb89e}
.demo-option:hover{border-color:#a59067}
.demo-option.is-selected{border-color:var(--gold);background:#343423;color:var(--gold-light)}
.demo-option.is-selected img{opacity:1}
.demo-option.is-selected span:after{content:'✓';color:var(--gold-light)}
.demo-context{font-size:1rem;color:#adb59f;margin:16px 0 0;line-height:1.8}
.demo-context a{text-decoration:underline;text-underline-offset:3px}
.hero-visual .visual-foot{margin-top:22px}
.hero-visual .visual-rule{margin-top:20px}
.hero-visual .visual-caption{margin-bottom:15px}
@media(max-width:520px){.demo-options{gap:8px;margin-bottom:18px}.demo-option img{height:47px}.demo-option span{font-size:1rem;padding:8px;min-height:37px}.hero-visual .visual-caption{font-size:1rem;letter-spacing:.8px}.demo-context{font-size:1rem;margin-top:14px}.hero-visual .visual-foot{margin-top:19px}}