:root {
  --fondo: #2c1d46;
  --texto: #ffffff;
  --acento: #ef6437;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 24px;
  background-color: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor {
  width: 100%;
  max-width: 900px;
  text-align: center;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* difumina los bordes para que la imagen se funda con el fondo */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}

.aviso {
  margin: 8px 0 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
}