/* A shared product scene; each category is directly clickable within its silhouette. */
#inicio .hero-inner { grid-template-columns: .86fr 1.14fr; gap: 34px; min-height: 660px; padding-block: 40px; }
.hero-family { min-width: 0; }
.hero-family-visual { position: relative; isolation: isolate; width: min(680px, 100%); margin-inline: auto; }
.hero-family-visual::before { content: ""; position: absolute; z-index: -1; inset: 20% -5% -4%; background: radial-gradient(ellipse closest-side at 52% 63%, #d6e3ec88, #e9f0f433 68%, transparent); pointer-events: none; }
.hero-family-visual > img { display: block; width: 100%; height: auto; }
.hero-product-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-product-link { cursor: pointer; outline: none; }
.hero-product-hit { fill: transparent; stroke: none; pointer-events: all; vector-effect: non-scaling-stroke; }
.hero-product-emphasis { opacity: 0; pointer-events: none; transition: opacity .2s; }
.hero-product-emphasis image { filter: brightness(1.07) saturate(1.04) drop-shadow(0 3px 4px #9b742a55); }
.hero-product-link:focus-visible .hero-product-emphasis { opacity: 1; }
.hero-product-link:focus-visible .hero-product-hit { stroke: var(--gold-dark); stroke-width: 2; stroke-dasharray: 5 4; }
@media (hover: hover) and (pointer: fine) { .hero-product-link:hover .hero-product-emphasis { opacity: 1; } }
@media (max-width: 1100px) {
  #inicio .hero-inner { grid-template-columns: 1fr 1.1fr; gap: 24px; min-height: 610px; }
}
@media (max-width: 900px) {
  #inicio .hero-inner { grid-template-columns: 1fr; min-height: 0; padding-block: 42px 40px; gap: 38px; }
  .hero-family { width: min(680px, 100%); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .hero-product-emphasis { transition: none; } }