.oferta {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 4, 7, .88);
  overflow: auto;
}



.is-oferta { overflow: hidden; }

.oferta__caja {
  width: min(480px, 100%);
  padding: 18px 20px 20px;
  border: 1px solid var(--web-violet, #b14fe0);
  background: var(--web-panel, #0b0a0e);
  color: var(--web-pink, #e86fa4);
  font: 13px/1.5 var(--web-arte, "Lucida Console", monospace);
  box-shadow: 0 0 0 1px rgba(5, 4, 7, .9), 0 10px 40px rgba(5, 4, 7, .7);
}

.oferta__membrete {
  margin: 0 0 10px;
  color: var(--web-violet, #b14fe0);
  font-size: 10px;
  letter-spacing: .08em;
}

.oferta__titulo {
  margin: 0 0 12px;
  font: 700 17px/1.2 var(--web-arte, "Lucida Console", monospace);
  letter-spacing: .04em;
}

.oferta__texto { margin: 0 0 9px; }

.oferta__lista {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--web-green, #31d67a);
}
.oferta__lista li { margin-bottom: 2px; }

.oferta__pregunta {
  margin: 14px 0 14px;
  font-weight: 700;
  letter-spacing: .1em;
}

.oferta__botonera {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.oferta__boton {
  display: block;
  padding: 11px 12px;
  border: 1px solid;
  border-radius: 0;
  color: #f4eef2;
  font: 12px/1.35 var(--web-arte, "Lucida Console", monospace);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.oferta__boton strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  letter-spacing: .08em;
}
.oferta__boton small {
  display: block;
  font-size: 10px;
  line-height: 1.35;
  opacity: .82;
}
.oferta__boton:focus-visible { outline: 2px dotted #f4eef2; outline-offset: 2px; }





.oferta__boton--roja { border-color: #ff5a52; background: #7d1b18; }
.oferta__boton--roja:hover, .oferta__boton--roja:focus-visible { background: #9c2420; }

.oferta__boton--azul { border-color: #5a9dff; background: #17306e; }
.oferta__boton--azul:hover, .oferta__boton--azul:focus-visible { background: #1f3f8f; }

@media (max-width: 420px) {
  .oferta__botonera { grid-template-columns: 1fr; }
  .oferta__caja { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .oferta__boton { transition: none; }
}