/* Sello del flash sobre el arco de la portada (solo mientras hay un flash activo) */
.hero-x-art { --seal: clamp(150px, 12.5vw, 176px); }
.flash-seal { position: absolute; z-index: 4; top: 5%; left: calc(50px - var(--seal) * .5); width: var(--seal); height: var(--seal); border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: var(--ink); background: radial-gradient(circle at 50% 35%, #fff 0%, #fdfaf4 60%, #f6eddf 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(214, 193, 155, .7), 0 30px 60px -28px rgba(116, 87, 47, .55), 0 10px 22px -14px rgba(116, 87, 47, .35); transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out), background .6s var(--ease); }
.flash-seal::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px solid rgba(168, 131, 79, .45); transition: border-color .6s var(--ease); }
.flash-seal::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(168, 131, 79, .55); animation: seal-halo 3.2s var(--ease-out) infinite; pointer-events: none; }
.flash-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flash-seal text { font-family: var(--sans); font-weight: 500; font-size: 6.6px; letter-spacing: .38em; text-transform: uppercase; fill: var(--gold-deep); transition: fill .6s var(--ease); }
.flash-seal .seal-bottom { font-weight: 400; font-size: 5.2px; letter-spacing: .16em; fill: var(--taupe); font-variant-numeric: tabular-nums; }
.flash-seal .seal-core { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; margin-top: -9%; }
.flash-seal .seal-pct { font-family: var(--serif); font-style: italic; font-size: calc(var(--seal) * .29); letter-spacing: -.02em; background: linear-gradient(160deg, #c9a467 0%, #8c6b3d 55%, #b08a52 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flash-seal .seal-pct sup { font-size: .42em; vertical-align: .9em; margin-left: 1px; font-style: normal; }
.flash-seal .seal-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: calc(var(--seal) * .052); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); transition: color .6s var(--ease); }
.flash-seal .seal-cta i { font-style: normal; transition: transform .6s var(--ease-out); }
.flash-seal:hover, .flash-seal:focus-visible { transform: translateY(-4px) scale(1.04); background: radial-gradient(circle at 50% 35%, #a8834f 0%, #8c6b3d 70%, #74572f 100%); box-shadow: 0 0 0 1px rgba(140, 107, 61, .9), 0 40px 70px -28px rgba(116, 87, 47, .7), 0 12px 24px -14px rgba(116, 87, 47, .45); }
.flash-seal:hover::before, .flash-seal:focus-visible::before { border-color: rgba(255, 255, 255, .45); }
.flash-seal:hover text, .flash-seal:focus-visible text { fill: #fff; }
.flash-seal:hover .seal-pct, .flash-seal:focus-visible .seal-pct { background: none; color: #fff; }
.flash-seal:hover .seal-cta, .flash-seal:focus-visible .seal-cta { color: #fff; }
.flash-seal:hover .seal-cta i { transform: translateX(4px); }
@keyframes seal-halo { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flash-seal::after { animation: none; opacity: 0; } }
@media (max-width: 900px) {
  .hero-x-art { --seal: 138px; }
  .flash-seal { top: 2%; left: calc(36px - var(--seal) * .55); }
}