/* Explicación en video (≈15 s, hecha con Remotion) dentro de una tarjeta de cobertura. */
.coverage-card.has-explainer { position: relative; overflow: hidden; }
.explainer-open {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin: -6px 0 18px; padding: 7px 16px 7px 7px;
  border: 1px solid #f0c9b1; border-radius: 999px; background: #fff7f1;
  color: var(--orange-ink, #b43b08); font-size: .875rem; font-weight: 650;
  box-shadow: 0 6px 16px #e0773a1f; transition: transform .2s, box-shadow .2s;
}
.explainer-open:hover { transform: translateY(-2px); box-shadow: 0 10px 22px #e0773a2e; }
.explainer-open-play { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(155deg, #e9661f, #b43b08); color: #fff; }
.explainer-open-play::after { content: ''; position: absolute; inset: -4px; border: 2px solid #e9661f; border-radius: 50%; opacity: 0; animation: ex-ping 2.4s ease-out infinite; }
.explainer-open-play svg { width: 14px; height: 14px; margin-left: 2px; }

.explainer { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: inherit; color: #fff; background: #191d1d; animation: ex-in .45s cubic-bezier(.7, 0, .2, 1) both; }
.explainer[hidden] { display: none; }
.explainer-video { display: block; width: 100%; max-height: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #191d1d; }
.explainer-loading { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 3px solid #ffffff33; border-top-color: #e9661f; border-radius: 50%; animation: ex-spin .8s linear infinite; }
.explainer-loading[hidden] { display: none; }
.explainer-close { position: absolute; top: 26px; right: 12px; z-index: 10; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #0000004d; color: #fff; font: 400 1.5rem/1 var(--body, sans-serif); }
.explainer-close:hover { background: #00000080; }

.explainer-end { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: #191d1de0; animation: ex-fade .4s ease both; }
.explainer-end[hidden] { display: none; }
.explainer-end > strong { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 2.8rem); line-height: 1; margin-bottom: 6px; }
.explainer-end .button { background: #e9661f; color: #fff; }
.explainer-end-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.explainer-replay, .explainer-read { border: 0; background: none; color: #fff; font: 600 .9375rem/1.4 var(--body, sans-serif); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

@keyframes ex-ping { 0% { opacity: .8; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes ex-in { from { clip-path: polygon(0 0, 0 0, -20% 100%, 0 100%); } to { clip-path: polygon(0 0, 140% 0, 120% 100%, 0 100%); } }
@keyframes ex-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ex-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .explainer, .explainer-end, .explainer-open-play::after { animation: none; }
}